欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

浅析Vue.js中v-bind v-model的使用和区别

程序员文章站 2023-01-20 14:34:41
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被...

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 特性

总结

以上所述是小编给大家介绍的vue.js中v-bind v-model的使用和区别，希望对大家有所帮助

上一篇： 如何使用 vue + d3 画一棵树

下一篇： 基于Vue组件化的日期联动选择器功能的实现代码

推荐阅读