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动态加载二
Aug 22 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
MAC中PyCharm设置python3解释器
2017/12/15 Python
Python下载网络小说实例代码
2018/02/03 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
django删除表重建的实现方法
2019/08/28 Python
python列表返回重复数据的下标
2020/02/10 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
数据库连接池的工作原理
2012/09/26 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
学雷锋活动总结范文
2014/04/25 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
重阳节标语大全
2014/10/07 职场文书
2014年检验科工作总结
2014/11/22 职场文书
经典导游欢迎词
2015/01/26 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
开工典礼致辞
2015/07/29 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
Oracle中update和select 关联操作
2022/01/18 Oracle