VUE是如何进行数据的绑定
日期：2018-05-18
来源：程序思维浏览：1391次
vue的核心特性之一是双向的数据绑定,关于如何进行数据的绑定,下面我们结合具体的例子来作讲解
2.3.1. 数据绑定的语法
2.3.1.1. 文本插值
直接填坑,进行数据的绑定
v-once:只绑定一次,首次赋值后更改vm实例的属性值不会引起dom元素绑定的值的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<input type="text" name="" v-model="message" id="" value="" />
<h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.1.2. html属性的绑定
v-bind: 为html标签绑定属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<div v-bind:id="mainID" v-html="main">
</div>
<img v-bind:src="imgUrl"/>
</div>
</body>
</html>
<!--
绑定属性
v-bind:prop_name="prop_value"
输出html
v-html="content"
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。
-->
<script>
var vm = new Vue({
el:'#app',
data:{
message:"hello world",
mainID:"dv",
main:"<p>这是v-html绑定的内容</p>",
imgUrl:'http://img2.imgtn.bdimg.com/it/u=2204211808,2775991232&fm=23&gp=0.jpg'
}
})
</script>
2.3.1.3. 绑定表达式
一段绑定表达式可以由一个简单的js表达式和可选的一个或多个过滤器组成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--字符串拼接-->
<p>{{ message + "----" + name }}</p>
<!--三元运算符-->
<p>{{ bool ? 1 : 0 }}</p>
<!--四则运算-->
<p>{{ num * 2 }}</p>
</div>
</body>
</html>
<!--
使用的限制是只能包含单个表达式
-->
<script>
//创建Vue对象
var app =new Vue ({
el:'#app',//将Vue对象绑定到指定的选择器
data:{
message: 'hello world ',
name:'高辉',
bool: true,
num:10
}
})
</script>
2.3.2. 表单控件
vue中使用v-model指令对表单元素进行双向的数据绑定
2.3.2.1. text
绑定的值就是value值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='message' />
<p>{{message}}</p>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.2.2. textarea
绑定的值也是value值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<p>multiline message is</p>
<p style="white-space: pre">{{message}}</p>
<textarea v-model="message" placeholder="mulpiline message"></textarea>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.2.3. radio
绑定的值就是选中单选框的value值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<label>
<input type="radio" value="male" v-model='gender' />男
</label>
<label>
<input type="radio" value="female" v-model='gender' />女
</label>
<p>{{gender}}</p>
</div>
</body>
</html>
<script>
var dataModel = {
message: 'hello world!',
gender:"male"
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.2.4. checkbox - 1
单选: 绑定的值是bool值,决定是否选中
多选: 绑定的值是一个数组类型,value值为数组里面的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--在这里加入模型数据-->
<h2>{{ message1 }}</h2>
<input type="checkbox" v-model="checked1" />
<h2>{{message2}}</h2>
<br />
<input type="checkbox" v-model="checked2" value="1" />
<label for="jack">Jack</label>
<hr />
<input type="checkbox" v-model="checked2" value="2" />
<label for="jack">rose</label>
<hr />
<input type="checkbox" v-model="checked2" value="3" />
<label for="jack">mack</label>
<hr />
<input type="checkbox" v-model="checked2" value="4" />
<label for="jack">july</label>
<hr />
<label for="checkbox">{{checked}}</label>
</div>
</body>
</html>
<script>
var dataModel = {
message1: '单选',
message2: '多选',
checked1: false,
checked2:[1,2]
}
var vm = new Vue({
el: '#app',
data: dataModel
})
</script>
2.3.2.5. checkedbox - 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" v-model="picked" value="a">
<p>{{ picked }}</p>
<hr/>
<input type="checkbox" v-model="toggle">
<p>{{ toggle }}</p>
<hr/>
<select v-model="selected">
<option value="abc">ABC</option>
</select>
<hr/>
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
</div>
</body>
</html>
<script>
var dataModel = {
picked: '',
toggle: true,
selected: 'abc',
a: '1',
b: '2'
}
var em = new Vue({
el: '#app',
data: dataModel
})
</script>
2.3.2.6. select
单选: 根据option的value值设置选中
多选: 根据value值的数组设置选中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>单选</h2>
<select v-model="selected">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>单选选中项是: {{selected}}</p>
<h2>多选</h2>
<select v-model="selecteds" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<p>多选选中项是: {{selecteds}}</p>
<h2>动态的select--循环渲染-设置单选</h2>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{option.text}}
</option>
</select>
<p>多选选中项是: {{selecteds}}</p>
</div>
</body>
</html>
<script>
var dataModel = {
message1: '单选',
message2: '多选',
selected: 'B',
selecteds: ['A', 'B'],
options: [{
text: 'One',
value: 'A'
}, {
text: 'Two',
value: 'B'
}, {
text: 'Three',
value: 'C'
}]
}
var vm = new Vue({
el: '#app',
data: dataModel
})
</script>
2.3.2.7. 绑定value
对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）
复选框
选择列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--对于单选按钮，勾选框及选择列表选项， v-model 绑定的 value 通常是静态字符串（对于勾选框是逻辑值）：-->
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
<!--复选框-->
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<!--选择列表-->
<select v-model="selected1">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
</div>
</body>
</html>
<script>
var dataModel = {
picked: 'a',
toggle: true,
selected: 'abc',
a: true,
b: false,
selected1: {
number: 123
}
}
var vm = new Vue({
el: '#app',
data: dataModel
})
// 选中
console.log(vm.toggle === vm.a) //true
// 取消选中
console.log(vm.toggle === vm.b) //false
// 选择列表的设置
console.log(vm.selected1)
console.log(vm.selected1.number)
</script>
2.3.2.8. 修饰符
2.3.2.8.1. .lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)
但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='message' />
<p>{{message}}</p>
</div>
</body>
</html>
<!--
禁用数据的双向绑定
-->
<script>
var dataModel = {
message: 'hello world!'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.2.8.2. .number
如果想自动将用户的输入值转为 Number 类型
如果原值的转换结果为 NaN 则返回原值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number='message' />
<p>{{message}}</p>
</div>
</body>
</html>
<!--
用户输入的数据可以转化W为number类型 进行输入的转化
不能转化问number类型(NaN),会保持当前的输入
-->
<script>
var dataModel = {
message: '11'
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
2.3.2.8.3. .trim
过滤用户输入的首尾空格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.trim='message' />
<p>{{message}}</p>
</div>
</body>
</html>
<!--过滤用户输入的首尾空格-->
<script>
var dataModel = {
message: ''
}
var vm= new Vue({
el:'#app',
data:dataModel
})
</script>
- 上一篇：VUE的生命周期
- 下一篇：VUE的class、style的使用与模板渲染
精品好课
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...