企业备案增加网站,明薇通网站建设价格,asp网站显示建设中,国外无版权素材网站Class绑定
数据绑定的一个常见需求场景式操纵元素的CSS class列表#xff0c;因为class是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是#xff0c;在处理比较复杂的绑定时#xff0c;通过拼接生成字符串是麻烦且易出错的。因此#xf…Class绑定
数据绑定的一个常见需求场景式操纵元素的CSS class列表因为class是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且易出错的。因此Vue专门为class的v-bind用法提供了特殊的功能增强。除了字符串外表达式的值也可以是对象或数组。
绑定对象
isActive: true,hasError: false,classObject: {active: true,text-danger: true},
p :class{active:isActive,text-danger:hasError}Class样式绑定1/pp :classclassObjectClass样式绑定2/p绑定数组
p :class[arrActive,arrHasError]Class样式绑定3/p
p :class[isActive ? active : ,hasError ? text-danger : ]Class样式绑定4/p绑定对象和数组
Class样式绑定5
注意事项 数组和对象的嵌套过程中只能数组嵌套对象不能反其道而行
scriptexport default {data() {return {isActive: true,hasError: false,classObject: {active: true,text-danger: true},arrActive: active,arrHasError: text-danger}}}
/scripttemplatep :class{active:isActive,text-danger:hasError}Class样式绑定1/pp :classclassObjectClass样式绑定2/pp :class[arrActive,arrHasError]Class样式绑定3/pp :class[isActive ? active : ,hasError ? text-danger : ]Class样式绑定4/pp :class[{active:isActive},{text-danger:hasError}]Class样式绑定5/p
/templatestyle.active {/* color: red; */font-size: 30px;}.text-danger {color: red;}/stylestyle绑定
数据绑定的一个常见场景是操纵元素的CSS style列表因为style是attribute,我们可以和其他attribute一样使用v-bind将它们和动态的字符串绑定。但是在处理比较复杂的绑定时通过拼接生成字符串是麻烦且易出错的。因此Vue专门为style的v-bind用法提供了特殊的功能增强。除了字符串外表达式的值也可以是对象或数组。
绑定对象
scriptexport default {data() {return {activeColor: green,size: 30,styleObject: {color: red,fontSize: 30px}}}}
/scripttemplatep :style{color:activeColor,fontSize:sizepx}Style绑定1/pp :stylestyleObjectStyle绑定2/p
/template绑定数组(了解)
p :style[styleObject]Style绑定3/p侦听器
我们可以使用watch选项在每次响应式属性发生变化时触发一个函数
scriptexport default {data() {return {message: Hello Vue 3}},methods: {updateHandle() {this.message Hello World!}},watch: {message(newValue, oldValue) {//数据发生变化时触发console.log(newValue, oldValue)}}}
/scripttemplateh3侦听器/h3p {{ message }}/pbutton clickupdateHandle修改数据/button
/template侦听器函数名必须与key保持一致
表单输入绑定
在前端处理表单时我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦v-model指令帮我们简化了这一步骤。
文本框
scriptexport default {data() {return {message: }}}
/scripttemplateh3表单输入绑定/h3forminput typetext v-modelmessagepMessage is: {{ message }}/p/form
/template复选框
scriptexport default {data() {return {message: ,checked: false}}}
/scripttemplateh3表单输入绑定/h3forminput typetext v-modelmessagepMessage is: {{ message }}/pinput typecheckbox idcheckbox v-modelcheckedlabel forcheckbox{{ checked }}/label/form
/template修饰符
v-model也提供了修饰符.lazy、.number、.trim
.lazy
默认情况下v-model会在每次input事件后更新数据。可以添加lazy修饰符来改为在每次change事件后更新数据。
input typetext v-model.lazymessage.number
只记录数字
input typetext v-model.numbermessage.trim
忽略前后空格
input typetext v-model.trimmessage
