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控件的相对独立性
Sep 06 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
JS运算符简单用法示例
Jan 19 Javascript
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上传中文文件名乱码问题处理方案
2015/02/03 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Python生成随机数的方法
2014/01/14 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python实现函数极小值
2019/07/10 Python
Python包和模块的分发详细介绍
2020/06/19 Python
物业经理求职自我评价
2013/09/22 职场文书
法律专业实习鉴定
2013/12/22 职场文书
生物制药自我鉴定
2014/01/25 职场文书
文体活动实施方案
2014/03/27 职场文书
我的祖国演讲稿
2014/05/04 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
销售口号大全
2014/06/11 职场文书
行政申诉状范文
2015/05/20 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
php修改word的实例方法
2021/11/17 PHP
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
mysql如何查询连续记录
2022/05/11 MySQL
python区块链持久化和命令行接口实现简版
2022/05/25 Python
MySQL数据库表约束讲解
2022/06/21 MySQL