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 ...
随机推荐
- 清除Linux登录记录
CentOS cat /dev/null > /var/log/wtmp cat /dev/null > /var/log/btmp cat /dev/null > /var/log ...
- Mac OS X 下安装Tableau Desktop Pro for Mac 10.2.0
安装步骤 1.断网安装tableau 2.双击Tableau Desktop.pkg 编辑 3.安装后到应用程序里把tableau这个单独文件从tableau文件夹里直接放到应用程序根目录 4. ...
- 针对Vmware打开BIOS中VT虚拟化相关后仍然报错
安装虚拟机时报错问题现象: 通过VMware虚拟机安装Centos时提示弹出提示框,"已将该虚拟机配置为使用64位客户机操作系统,但是,无法执行64位操作."具体提示如下图所示: ...
- 记一次修改dotnet-cnblogs图片路径的正则匹配规则
大佬的GitHub 前言 因为最近一时心血来潮,学了markdown,我觉得但凡是个人,对于不用word或html就可以有不错的排版,而且使用起来简单便捷,都会投向markdown的怀抱中的.又因 ...
- VS Code第一部分--创建
第一步:Win键+R cmd 打开之后 输入 vue ui 运行结束后 会显示一个仪表盘页面 点击左下方的更多 点击项目管理器 点击创建 输入自己创建的文件夹地址 按回车保存 点击下方的创建 ...
- OS-lab1
OS-lab1 boot boot文件夹中只有start.S文件,这个文件用于初始化内核.关掉中断,设置内核栈,并跳转到main函数. init init.c 执行初始化操作. main.c 主函数, ...
- 12组-Beta冲刺-1/5
12组-Beta冲刺-1/5 一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15590128.html Github链接:http ...
- 超强大的PS汉化插件Specs 一键尺寸标注
尺寸标注是大多数设计师必不可少的细节工作,特别是在一些特定的设计图中,标注至关重要.大部分设计大大都直接用CAD标注,其实借助插件,PS也是完全可以搞定常见的尺寸标注的. 插件介绍 这是一款超级强大的 ...
- oralce sql 缓存查询及删除
--缓存查询语句 V$SQLAREA 视图记录sql 执行情况(加载次数/用时/Id....) 常用字段 ADDRESS:SQL语句在SGA中的地址. 这两列被用于鉴别SQL语句,有时,两条不同的语句 ...
- mysql常用语句操作
概述: 1.通过表结构介绍.来操作mysql常用的语法&语句: 2.现在学习下几个基本的sql语句,万变不离其宗,把基础弄扎实了其它的就很容易了 一.表结构&建表: 1.学生基础信息表 ...