Vue（三）——数据绑定

数据绑定简单文本绑定最简单也是最常用的数据绑定方法，通过使用{{}}标签来绑定数据：var app = new Vue({el : '#app',data : {name: 'hengyumo'}})<span>Hello, this is {{name}}</span> --> Hello, this is hengyumo通过app...

衡与墨

9077人浏览 · 2019-04-30 23:41:00

衡与墨 · 2019-04-30 23:41:00 发布

数据绑定

简单文本绑定

最简单也是最常用的数据绑定方法，通过使用{{}}标签来绑定数据：

var app = new Vue({
	el : '#app',
	data : {
		name: 'hengyumo'
	}
})

<span>Hello, this is {{name}}</span> --> Hello, this is hengyumo

通过app.name = 'xiaoli’可以实现数据的更新

使用{{* name }}可以实现单次插值，即数据只在首次赋值中起作用，而后续的更新不会引起变化。

vue2中使用v-once替代了{{* name }}的写法，即<span v-once='name'>{{name}}</span>

{{}}同样可以用在html元素的属性上，例如<h1 id="title-{{id}}">title-{{id}}</h1>，
在vue2中用v-bind代替了这种写法：<h1 v-bind:id="'title-' + id">title-{{id}}</h1>
或者简写成<h1 :id="'title-' + id">title-{{id}}</h1>

示例：

<!DOCTYPE html>
<html>
<head>
	<title>test data binding 1</title>
	<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
</head>
<body>
	<div id="app">
		<span>Hello, this is {{name}}</span>
		<span>My name is {{* name }}</span>
		<h1 id="title-{{id}}">title-{{id}}</h1>
	</div>
</body>

<script type="text/javascript">
	var app = new Vue({
	 　el : '#app',
	 　data: {
	 　　name: 'hengyumo',
	 	 id: 0
	 　} 
	})
	app.name = 'xiaoli'
</script>
</html>

结果：

f12查看dom：

表达式绑定

放在{{}}之中的除了最基本的数据之外，还可以是js表达式，下面是几个示例：

{{ i + 1 }}
{{ i == 0 ? 'yes': 'no' }}
{{ location.split('-') }}
{{ times.join('-') }}

注意只能是表达式而不能是语句，下面的示例是错误的：

{{ var name = 'xiaoli' }}
{{ if (ok) {return name} }}

过滤器

在表达式后边可以添加过滤器，用’|'来进行分隔，如：

{{ name | uppercase }} //返回字符串的大写值
{{ name | filter_1 | filter_2 }} //使用两个过滤器
{{ name | filter arg_1 arg_2 }} //使用arg_1和arg_2作为filter的参数
{{ name.split('') | limitBy 3 1 }} //返回name.split('')之后的1-4个数组元素

以下是vue1内置的10个过滤器：
① capitalize ：字符串首字符转化成大写
② uppercase ：字符串转化成大写
③ lowercase ：字符串转化成小写
④ currency 参数为{String}[货币符号] ,{Number} [小数位]，将数字转化成货币符号，并且会自动添加数字分节号。例如：
{{ amount | currency ‘￥’ 2 }} // -> 若amount值为10000，则输出￥10,000.00
⑤ pluralize 参数为 {String} single, [double, triple]，字符串复数化。如果接收的是一个参数，那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数，则会被当成数组处理，字符串会添加对应数组下标的值。如果字符串的个数多于参数个数，多出部分会都添加最后一个参数的值。例如：

<p v-for="c in count">{{ c | pluralize 'item' }}　 {{ c | pluralize 'st' 'nd' 'rd' 'th' }}</p>

结果：
1item 1st
2items 2nd
3items 3rd
4items 4th
⑥ json 参数为 {Number}[indent] 空格缩进数，与 JSON.stringify() 作用相同，将 json 对象数据输出成符合 json 格式的字符串。
⑦ debounce 传入值必须是函数，参数可选，为 {Number}[wait]，即延时时长。作用是当调用函数 n 毫秒后，才会执行该动作，若在这 n 毫秒内又调用此动作则将重新计算执行时间。例如：

<input v-on:keyup ="onKeyup | debounce 500"> // input元素上监听了keyup事件， 并且延迟500ms触发

⑧ limitBy 传入值必须是数组，参数为 {Number}limit，{Number}[offset], limit 为显示个数，offset 为开始显示数组下标。例如：

<div v-for="item in items | limitBy 10"></div>　// items为数组，且只显示数 组中的前十个元素

⑨ filterBy 传入值必须是数组，参数为 {String | Function} targetStringOrFunction，即需要匹配的字符串或函数（通过函数返回值为 true 或 false 来判断匹配结果）；“in” （可选分隔符）；{String}[…searchKeys]，为检索的属性区域。示例 :

names : ['xiaoli', 'xiaowan'],
items : {
	{ name : 'xiaoli', age : "10" },
	{ name : 'xiaowan', age : "20" }
}
...
<p v-for="name in names | ﬁlterBy 'li'">{{name}}</p>　// 检索items数组中 值包含1.0的元素 
<p v-for="item in items | ﬁlterBy 'wan' in 'name'">{{ item | json}}</p> // 检索items数组中元素属性name值为1.0的元素输出。检索区域也可以为数组，即in [name, age]，在多个属性中进行检索

结果：
xiaoli
{“name” : “xiaowan”, “age” : “20” }

<p v-for="item in items | ﬁlterBy customFilter">{{ item | json}}</p> // 使用自定义的过滤函数，函数可以在选项methods中定义 
methods : { 
	customFilter : function(item) {
 　　  if(item.name) return true　// 检索所有元素中包含name属性的元素
	}
}

⑩ orderBy 传入值必须是数组，参数为 {String|Array|Function}sortKeys，即指定排序策略。这里可以使用单个键名，也可以传入包含多个排序键名的数组。
也可以像 Array.Sort() 那样传入自己的排序策略函数。第二个参数为可选参数 {String}[order]，即选择升序或降序， order>=0 为升序，order<0 为降序。下面以三种不同的参数例子来说明具体的用法：

单个键名：
<p v-for="item in items | orderBy 'name' -1">{{item.name}}</p> // items数组中以键名name进行降序排列 
多个键名：
<p v-for="item in items | orderBy [name,age] ">{{item.name}}</p> // 使用items里的两个键名进行排序 
自定义排序函数: 
<p v-for="item in items | orderBy customOrder">{{item.name}} </p> 
methods: {
 　customOrder: function (a, b) {
 　　 return parseFloat(a.age) > parseFloat(b.age)　// 对比item中 age的值的大小进行排序
 　} 
}

在vue2中去除了内置的过滤器，但是我们仍可以定义自己的过滤器，也可以使用开源的插件中带的过滤器。

指令

vue.js是用v-加上指令名组成的，通过使用指令可以设置绑定数据和时间的规则：
① 参数绑定

等同于使用v-bind：

在这里v-bind是个命令，而src既是命令的参数
② 修饰符

计算属性中的函数

在使用数据绑定时，我们通常在呈现数据时都需要对数据进行一定的处理，为了避免过重的逻辑放在模板上，我们可以通过使用计算属性中的函数来预处理数据，从而提高可维护性和阅读性：
示例：

<p>{{ date }}</p>
<p>{{ time }}</p>
<p>{{ datetime }}</p>

...

var app = new Vue({
	el: '#app',
	data: {
		date: '2019-2-18',
		time: '10:31'
	},
	computed: {
		datetime: function() {
			return this.date + ' ' + this.time
		}
	}
})

更方便的是计算属性中的set和get：

<p>{{ show_num }}</p>

...

var app = new Vue({
	el: '#app,
	data: { num: 100 },
	computed: {
		show_num: {
			set: function(num) {
				this.num = num
			}
			get: function() {
				return 'num is ' + this.num
			}
		}
	}
}
app.num = 200 // -> num is 200

表单控件

通过使用v-model来进行对表单元素的双向数据绑定，在修改表单元素值时会同时对v-model绑定的数据进行修改：

var app = new Vue({
 　 el : '#app',
 　 data: {
 　　  message : '',
　　   gender : '',
 　　  checked : '', 
 　　  multiChecked : [],
 　　  selected : '',
 　　  multiSelected : []
 　 } 
})

Text

<input type="text" v-model="message" /> 
<span>Your input is : {{ message }}</span>

Radio

<label><input type="radio" value="male" v-model="gender ">男</lable> <label><input type="radio" value="female" v-model="gender ">女</lable> 
<p>{{ gender }}</p>
//gender 值即为选中的 radio 元素的 value 值。

CheckBox
Checkbox 分两种情况：单个勾选框和多个勾选框。单个勾选框，v-model 即为布尔值，此时 input 的 value 并不影响 v-model 的值。

<input type="checkbox" v-model="checked" /> 
<span>checked : {{ checked }}</span>

多个勾选框，v-model 使用相同的属性名称，且属性为数组。

<label><input type="checkbox" value="1" v-model=" multiChecked">1</lable> <label><input type="checkbox" value="2" v-model=" multiChecked">2</lable> <label><input type="checkbox" value="3" v-model=" multiChecked">3</lable> <p>MultiChecked: {{ multiChecked.join('|') }}</p>

Select
同 Checkbox 元素一样，Select 也分单选和多选两种，多选的时候也需要绑定到一个数组。

单选：

<select v-model="selected">
 　 <option selected>A</option>
 　 <option>B</option>
 　 <option>C</option> 
</select> 
<span>Selected: {{ selected }}</span>

多选：

<select v-model="multiSelected" multiple>
 　 <option selected>A</option>
 　 <option>B</option>
 　 <option>C</option> 
</select> 
<br> 
<span>MultiSelected: {{ multiSelected.join('|') }}</span>

绑定value
表单控件的值同样可以绑定在 Vue 实例的动态属性上，用 v-bind 实现。
示例：

Checkbox

<input type="checkbox" v-model="checked" v-bind:true-value="a" v-bind:false-value="b"> 
选中：app.checked == app.a　　// -> true 
未选中：app.checked == app.b　// -> true

Radio

<input type="radio" v-model="checked", v-bind:value="a"> 
选中 : app.checked == app.a　// -> true

Select Options

<select v-model="selected"> 　 
	<!-- 对象字面量 --> 　 
	<option v-bind:value="{ number: 123 }">123</option> 
</select> 
选中：
typeof app.selected //　-> 'object' 
app.selected.number // -> 123

参数特性
Vue.js 为表单控件提供了一些参数，方便处理某些常规操作。
① lazy
默认情况下，v-model 在 input 事件中同步输入框值与数据，加 lazy 属性后从会改到在 change 事件中同步

<input v-model="query" lazy />

② number
会自动将用户输入转为 Number 类型，如果原值转换结果为 NaN 则返回原值。

<input v-model="age" number/>

③ debounce
debounce 为设置的最小延时，单位为 ms，即为单位时间内仅执行一次数据更新。该参数往往应用在高耗操作上，例如在更新时发出 ajax 请求返回提示信息。

<input v-model="query" debounce="500" />

不过 Vue.js 2.0 中取消了 lazy 和 number 作为参数，用修饰符（modifier）来代替 :

<input v-model.lazy="query" />　<input v-model.numer="age" />

新增了 trim 修饰符，去掉输入值首尾空格 :

<input v-model.trim="name" />

去除了debounce 这个参数，原因是无法监测到输入新数据，但尚未同步到app 实例属性时这个状态。如果仍有需要，官方提供了手动实现的例子https://jsbin.com/zefawu/3/edit?html,output。

样式绑定

通过使用v-bind:class或者v-bind:style就可以进行简单的样式绑定了，但是vue还有一些更高级的使用方法来方便我们。

1、class绑定
① 对象语法：v-bind:class 接受参数是一个对象，而且可以与普通的 class 属性共存。

<div class="tab" v-bind:calss="{'active' : active , 'unactive' : !active}"> </div> 

app实例中需要包含 　 
data : {
 　　  active : true
 　}

结果为：

<div class="tab active"></div>

② 数组语法：v-bind:class 也接受数组作为参数。

<div v-bind:class="[classA, classB]"></div> 

app实例中需要包含 　 
data : {
 　　  classA : 'class-a',
 　　  classB : 'class-b'
 　 }

结果为：

<div class="class-a class-b"></div>

也可以使用三元表达式切换数组中的 class，<div v-bind:class="[classA, isB ? classB : '']"></div>。如果 app.isB = false, 则渲染结果为

<div v-bind:class="class-a"></div>

2、内联样式绑定
style 属性绑定的数据即为内联样式，同样具有对象和数组两种形式：
① 对象语法：直接绑定符合样式格式的对象。

<div v-bind:style="alertStyle"></div> 
data : {
 　 alertStyle : {
 　　   color : 'red',
 　　   fontSize : '20px'
 　 } 
}

② 数组语法：v-bind:style 允许将多个样式对象绑定到统一元素上。

<div v-bind:style="[ styleObjectA, styleObjectB]" ></div>

3、自动添加前缀在使用 transform 这类属性时，v-bind:style 会根据需要自动添加厂商前缀。:style 在运行时进行前缀探测，如果浏览器版本本身就支持不加前缀的 css 属性，那就不会添加。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

衡与墨

@le_17_4_6

已为社区贡献2条内容