Vue基础（2）双向绑定
双向数据绑定
- 通过修改标签，例：切换radio、checkbox......都会对绑定的数据有影响
- 通过事件触发方法，修改data中数据，反向作用于radio、checkbox......
1、v-model
（1）通过绑定input实现双向绑定
</head>
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<div>{{input_value}}</div>
<input type="text" v-model="input_value"> </div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default'
}
}) </script>
</body>
打开前端页面默认显示：
输入框重新输入后显示：
我们可以看出，当输入框的值变动时，同时绑定了“input_value”的div、input标签一起在同时变动，所以是当input框输入时，产生了联动
（2）通过button点击实现双向绑定
<body>
<div id="app">
<!-- div、input标签同时绑定data中input_value -->
<div>{{input_value}}</div>
<input type="text" v-model="input_value">
<!-- 绑定change -->
<input type="button" value="change" @click="change"> </div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default'
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
}) </script>
</body>
点击【change】前：
点击【change】后：
（3）通过radio进行双向绑定
<body>
<div id="app">
<div>{{sex}}</div>
// 绑定sex,默认是1，会默认勾选男
<input type="radio" value="1" name="sex" v-model="sex">男
<input type="radio" value="2" name="sex" v-model="sex">女
</div>
<script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
input_value:'default',
sex:1
},
methods:{
change:function () {
this.input_value = 'change value'
}
}
}) </script>
</body>
默认显示：
点击【女】时显示：
（4）通过checkbox实现双向数据绑定
- value配置成 [ ] 用于存储选择的多个数据
<body>
<div id="app">
<div>{{movies}}</div>
//勾选后，会取值到【input标签】的value的值
<input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠
<input type="checkbox" value="复仇者联盟" v-model="movies">复仇者联盟
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
movies:[]
movies:['钢铁侠']
},
methods:{
}
})
</script>
</body>
默认展示：
勾选后显示：
data中的movies:['钢铁侠']时，默认显示：
我们可以看出，勾选后，input中的value值是同步到了list中
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<option value="钢铁侠">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
movie:'',
// movie:'钢铁侠'
},
methods:{
}
})
</script>
</body>
（5）通过下拉框option实现双向绑定
- value 配置成 str
<body>
<div id="app">
<div>{{movie}}</div>
<select v-model="movie">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<option value="钢铁侠">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
// movie:'',
movie:'钢铁侠'
},
methods:{
}
})
</script>
</body>
- movie值为空时默认显示：
- movie值为‘钢铁侠’时显示：
- movie值为空，添加<option disabled value="">请选择</option>后，默认显示：
- 下拉框操作后显示：
- 多选下拉框双向绑定
<body>
<div id="app">
<span>请选择你喜欢的电影：{{selectMovie}}</span><br>
<select v-model="selectMovie" multiple size="4">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<option value="变形金刚">钢铁侠</option>
<option value="复仇者联盟">复仇者联盟</option>
<option value="头号玩家">头号玩家</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
selectMovie:'',
},
methods:{
}
})
</script>
</body>
默认显示：
选择后显示：
动态值绑定
<body>
<div id="app">
<span>请选择你喜欢的电影：{{Movie}}</span><br>
//"Movie"双向数据绑定”，和data中“Movie”进行了关联
<select v-model="Movie">
<!--下拉框默认显示 -->
<option disabled value="">请选择</option>
<!--循环后option中的值为：{"name":"变形金刚","id":1}等3个;value:不加v-bing取值的是字符串，加上后，才会是取值的option的id-->
<option v-for="option in options" v-bing:value="option.id">{{option.name}}</option>
</select>
</div> <script src="../js/vue.js"></script> <script>
new Vue({
el:'#app',
data:{
Movie:'',
// id:可以理解为后台对“变形金刚”录入的主键ID
options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"头号玩家","id":3}],
},
methods:{
}
})
</script>
</body>
默认显示：
选择后显示：
Vue基础（2）双向绑定的更多相关文章
- vue.js初级入门之最基础的双向绑定操作
首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...
- Vue框架之双向绑定事件
Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...
- 用ES6的class模仿Vue写一个双向绑定
原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- 剖析Vue原理&实现双向绑定MVVM-1
本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
随机推荐
- [学习计划]mysql常用语句-随学随整理
<> 不等于 三元表达式 select *, if (num=1, "第一", "其他") as 别名 from 表 COUNT 统计总数并按某 ...
- 使用 symfony 框架时 配置运行环境时 报debug 工具栏问题及 No input file specified.
错误一: 错误二:点击跳转时:No input file specified. 解决方法:配置nginx.conf时 增加以下代码: location / { index app_dev.php; t ...
- 【易语言】exui超级列表框使用方法
优秀例程1 黑鸟 https://jiucaiwl.lanzoum.com/iLq8B0oswkuf
- web基础(5): CSS3介绍
chapter5 CSS3 新性能 (一)圆角边框与阴影 1.border-radius属性 例1 border-top-left-radius:40px 20px ; 两个值分别表示水平方向.垂直方 ...
- c# message (转)
一.消息概述 Windows下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理. 什么是消息(Message) 消息就是通知和命令. ...
- React子组件继承父组件的props
https://zh-hans.reactjs.org/warnings/unknown-prop.html
- pyqt5中文教程
本文转载自:http://code.py40.com/pyqt5/ 一.PyQt5基本功能 简单的例子 PyQt5是一种高级的语言,下面只有几行代码就能显示一个小窗口.底层已经实现了窗口的基本功能. ...
- QT 使用QDomDocument::setContent()读XML文件总是返回false
代码: if(!doc.setContent(&file)){读取失败操作}发现总是返回false: 使用如下代码调试: if(!doc.setContent(&file,&s ...
- signalR从外部服务中推送消息和全局参数的设置
在前面的章节中,我们都是采用两方模式, 客户端 <-> 服务端,也就是说在这种情况下如果有第三方如果有通知的没有办法插足的,下面解决方案 1:和之前的代码一样,在index页面加一个客户端 ...
- Microsoft Project 使用教程
Microsoft Project使用教程 一.新建项目 1. Project界面操作 "文件" -→ "新建" -→ "空白项目" 建议在 ...