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 相关文章推荐
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
Javascript this指针
2009/07/30 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
Web制作验证码功能实例代码
2017/06/19 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
wxPython事件驱动实例详解
2014/09/28 Python
Python实现批量下载文件
2015/05/17 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python可视化text()函数使用详解
2020/02/11 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
团日活动总结书格式
2014/05/08 职场文书
禁烟标语大全
2014/06/11 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
新员工辞职信范文
2015/05/12 职场文书
好员工观后感
2015/06/17 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
详细聊聊vue中组件的props属性
2021/11/02 Vue.js