vue指令之表单控件绑定v-modelv-model与v-bind结合使用

一、表单控件绑定v-model

创新互联长期为上千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为澄迈企业提供专业的成都做网站、网站制作，澄迈网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

v-model 双向数据绑定；一般用于表单元素，会忽略表单元素的value、checked、selected的初始值，且将Vue实例的数据作为数据来源。

① 单行文本框 input[type="text"] 、多行文本框 textarea：

v-model值绑定到value属性；

<body>
  <div id="app">
   <input type="text" v-model="username" value="我是初始值，但是我被忽略了"><br/>
   <textarea v-model="schoolname" value="我是初始学校：北大青鸟"></textarea><br/>
  </div>
  <script src="./vue.js"></script>
  <script>
   var vm = new Vue({
     el:'#app',
     data:{
      username:'小鸣',
      schoolname:'XX科技大学'
     }
   })
  </script>
</body>

ps：下面看下Vue v-bind v-model的使用

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指令之表单控件绑定v-model v-model与v-bind结合使用 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

分享标题：vue指令之表单控件绑定v-modelv-model与v-bind结合使用
标题URL：https://www.cdcxhl.com/article28/gscjjp.html

成都网站建设公司_创新互联，为您提供外贸建站、域名注册、网站排名、、软件开发、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容