网站安全风险评估报告,创建吃的网站怎么做,wordpress sae 主题,网站做任务包括什么文章目录 v-bind#xff0c;数据单向绑定简写形态#xff08;省略v-bind#xff0c;只留冒号#xff09;示例一#xff08;将输入框数据改为#xff1a;哈哈哈哈哈#xff09;#xff1a;实例二#xff08;将Vue实例中的name改为字符串#xff1a;单向绑定数据单向绑定简写形态省略v-bind只留冒号示例一将输入框数据改为哈哈哈哈哈实例二将Vue实例中的name改为字符串单向绑定 v-model数据双向绑定并非所有属性均可使用简写形态保留v-model删除冒号和value即:value示例一将v-model对应的输入框输入数据哈哈哈示例二将Vue实例中的name改为字符串我不知道 无法使用v-model的情况示例一使用v-bind成功示例二使用v-model失败 v-bind数据单向绑定
当我们将代码写成这样的时候只使用v-bind单向绑定标签内元素的属性
bodydiv idboxinput typetext v-bind:valuename/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #box,data: {name: 这里是name的值,}})/script
/body会呈现如下的效果 标签中的数据和Vue实例中的数据是单向绑定的Vue实例中的对应数据改变会带着标签中的数据改变但是标签中的数据改变则不会带着Vue实例中的数据改变。
简写形态省略v-bind只留冒号
input typetext :valuename展示图片未刷新页面未修改代码仅在该页面直接修改或者使用Vue开发者工具
示例一将输入框数据改为哈哈哈哈哈
Input输入框中的数据无法带动Vue实例中的数据一起变化 效果Input中的数据改变了但是Vue实例中的数据没有改变
实例二将Vue实例中的name改为字符串“单向绑定”
修改Vue实例数据可以改变Input输入框数据 效果Vue实例中的数据改变可以带动Input中的数据改变
v-model数据双向绑定并非所有属性均可使用
多应用于表单类元素其他元素会出错。 将上述的代码修改为
bodydiv idboxv-bind:input typetext v-bind:valuenamep/pv-model:input typetext v-model:valuename/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #box,data: {name: 这里是name的值,}})/script
/body就像v-bind可以简写一样v-model针对于value值也可以简写。
简写形态保留v-model删除冒号和value即:value
input typetext v-modelname不会出现错误
使用v-model就可以实现数据的双向绑定也就是input输入框中的数据会影响Vue实例中的数据Vue实例中的数据也会影响Input输入框中的数据。
展示图片未刷新页面未修改代码仅在该页面直接修改或者使用Vue开发者工具存在数据双向绑定和数据单向绑定的连锁反应可以仔细自考
示例一将v-model对应的输入框输入数据哈哈哈 效果修改v-model的数据会改变Vue实例中的数据进而带动单向数据绑定的v-bind输入框一起变化
示例二将Vue实例中的name改为字符串我不知道 效果修改Vue实例中的数据会改变v-model的数据也会改变v-bind输入框的数据
无法使用v-model的情况
v-model只能用于表单情况输入类元素存在value值的情况。 不存在value值的元素无法捕捉用户的输入数据根本不存在从元素改变数据的路径。
单选框多选框Inputselect等等都行它们都存在value值
示例一使用v-bind成功
样例代码
bodydiv idboxh1 v-bind:xname这里/h1/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #box,data: {name: 这里是name的值,}})/script
/body实例图片使用v-bind元素界面x属性没有丢失
示例二使用v-model失败
样例代码将示例一代码中的v-bind修改为v-model
bodydiv idboxh1 v-bind:xname这里/h1/divscript typetext/javascriptVue.config.productionTip falsenew Vue({el: #box,data: {name: 这里是name的值,}})/script
/bodyh1标签中的x属性丢失且可以在控制台console发现错误模版编译失败 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
