v-bind和v-model详解
发布时间:2020-12-14 04:40:09 所属栏目:大数据 来源:网络整理
导读:1 v-bind v-bind绑定属性::属性名 = v-bind:属性名 绑定class 数组::class="[active,line]" 对象::class="{active: isActive,line: isLine}" 绑定style :style="{color: fontColor}"? (样式名:样式值) data: { ??? fontColor:‘black‘ } 2 v-model ??
1 v-bindv-bind绑定属性::属性名 => v-bind:属性名 绑定class数组::class="[active,line]" 对象::class="{active: isActive,line: isLine}" 绑定style:style="{color: fontColor}"? (样式名:样式值) data: { ??? fontColor:‘black‘ } 2 v-model??? v-model的双向绑定原理:通过v-bind将model数据绑定进页面,然后又通过v-on绑定事件来监听页面的变化,并将变化了的数据重新绑定进model数据中。 v-model对表单的绑定:单选框:<label for="male"> sex:‘男‘,//单选框绑定v-model 选中|不选中 对应 绑定的值 是|不是 对应的value 多选框(单个):<label for="agree"> isAgree:false,//单个多选框对应是布尔值 (即v-mode绑定的不是数组时,选中|不选中对应true|false) 多选框(多个):<input type="checkbox" id="basketball" v-model="hobbies" value="篮球">篮球 hobbies:[],//多个多选框对应的是数组 (v-model绑定的是数组时,选中|不选中对应的是向数组加入value|不加入value) 选项卡(单选):<select name="singleSelect" v-model="fruit"> fruit:‘香蕉‘,//选项卡单选,与单选框类似只能选单个 对应类型为str 选项卡(多选):<select name="multipleSelect" v-model="fruits" multiple> fruits:[],//选项卡多选,与多个多选框类似能选多个 对应类型为数组 ? 实际开发中应用的v-model值绑定(从服务器请求的value):<!--从服务器取得数据并渲染页面,选中的选项信息保存于List中--> originalList:[{id:1,value:‘大西瓜‘},{id:2,value:‘小苹果‘},{id:3,value:‘臭榴莲‘}],//从服务器取得的数据 v-model事件修饰符:1 v-model.lazy 只有按下enter或者失去光标时才会响应式更新数据2 v-model.number 在输入框中无论输入什么都会被默认转化成string类型,用这个修饰符后number类型不会被转化3 v-model.trim 如果输入的内容首尾有空格,则会自动去除空格 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |