Vue模板语法中数据绑定的实例代码


Posted in Javascript onMay 17, 2019

1.单项数据绑定

<div id="di">
<input type="text" :value="input_val">
</div>

<script>
var app = new Vue({
el: '#di',
data: {
input_val: 'hello world '
}
})
</script>

 通过浏览器 REPL 环境可以进行修改 app.input_val = 'Vue'

我们通过 vue 对象修改数据可以直接影响到 DOM 元素,但是,如果直接修改 DOM 元素,却不会影响到 vue 对象的数据;我们把这种现象称为 单向数据绑定 ;

2.双向数据绑定v-model:

<div id="di">
 <input type="text" v-model="input_val" >
</div>

<script>
 var app = new Vue({
  el: '#di',
  data: {
   input_val: 'hello world '
  }
 })
</script>

通过 v-model 指令展示表单数据,此时就完成了 双向数据绑定 ;

不管 DOM 元素还是 vue 对象,数据的改变都会影响到另一个;

2.1双向数据绑定的应用范围:

    文本框 & 文本域

<div id="di">
 <textarea v-model="inp_val"></textarea>
 <div>{{ inp_val }}</div>
</div>

<script>
 var app = new Vue({
  el: '#di',
  data: {
   inp_val: ''
  }
 })
</script>

     绑定复选框

<div id="di">
 吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
 睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
 {{ checklist }}
</div>

<script>
 var vm = new Vue({
  el: '#di',
  data: { checklist: []
  }
 });
</script>

      绑定单选框

<div id="ap">
 男<input type="radio" name="sex" value="男" v-model="sex">
 女<input type="radio" name="sex" value="女" v-model="sex"> 
 <br>
 {{sex}}
</div>

<script>
 var vm = new Vue({
  el: '#ap',
  data: {
   sex: ''
  }
 });
</script>

总结

以上所述是小编给大家介绍的Vue模板语法中数据绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
jQuery控制input只能输入数字和两位小数的方法
May 16 #jQuery
微信小程序云开发详细教程
May 16 #Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 #Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 #Javascript
微信小程序云开发之云函数详解
May 16 #Javascript
微信小程序云开发之模拟后台增删改查
May 16 #Javascript
微信小程序云开发之新手环境配置
May 16 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
js实现简单点赞操作
2020/03/17 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python内存读写操作示例
2018/07/18 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python通过cython加密代码
2020/12/11 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
nohup的用法
2012/11/26 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
创先争优一句话承诺
2014/05/29 职场文书
婚庆公司计划书
2014/09/15 职场文书
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
婚宴新郎致辞
2015/07/28 职场文书
致运动员的广播稿
2015/08/19 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL
Python操作CSV格式文件的方法大全
2021/07/15 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server