当前位置： 移动技术网 > IT编程>网页制作>CSS > 深入解析Vue.js中v-bind v-model的使用和区别

深入解析Vue.js中v-bind v-model的使用和区别

2018年12月08日  | 移动技术网IT编程  | 我要评论

搞笑恐怖鬼片,湖北大学知行学院首页,常熟零距离团购

v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

最基础的就是实现一个联动的效果

<body>
  <div class="app">
    <span>multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>
 
</body>
<script>
  new vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkednames">
    <label for="jack">jack</label>
    <input type="checkbox" id="john" value="john" v-model="checkednames">
    <label for="jack">john</label>
    <input type="checkbox" id="mike" value="mike" v-model="checkednames">
    <label for="jack">mike</label>
    <br>
    <span>checked names:{{checkednames}}</span>
  </div>
   
</body>
<script>
  new vue({
     el:'.app',
     data:{
       checkednames:[]
     }
  })
</script>

v-bind

有些指令可以在其名称后面带一个“参数” (argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 html 特性

结语

感谢您的观看，如有不足之处，欢迎批评指正。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网