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


Posted in Javascript onDecember 04, 2018

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的使用和区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 #Javascript
Vue.js 图标选择组件实践详解
Dec 03 #Javascript
You might like
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP防止注入攻击实例分析
2014/11/03 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
Mac 上切换Python多版本
2017/06/17 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python生成器generator用法示例
2018/08/10 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python命令行参数用法实例分析
2019/06/25 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
介绍一下Java的事务处理
2012/12/07 面试题
基层党组织建设整改方案
2014/09/16 职场文书
狮子林导游词
2015/02/03 职场文书
2015年手术室工作总结
2015/05/11 职场文书
校园广播站开场白
2015/06/01 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android