1.插值
数据绑定最常见的形式就是文本插值：
<template>
<view>
<view>Message: {{ msg }}</view>
</view>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!'
}
}
}
</script>
复制代码
里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。
#使用 JavaScript 表达式
迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
<template>
<view>
<view>{{ number + 1 }}</view>
<view>{{ ok ? 'YES' : 'NO' }}</view>
<!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
<view>{{ message.split('').reverse().join('') }}</view>
</view>
</template>
<script>
export default {
data() {
return {
number:1,
ok:true,
message: 'Hello Vue!'
}
}
}
</script>
<template>
<view>
<view v-for="(item,index) in 10">
<!-- 通过%运算符求余数，实现隔行换色的效果 -->
<view :class="'list-' + index%2">{{index%2}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return { }
}
}
</script>
<style>
.list-0{
background-color: #aaaaff;
}
.list-1{
background-color: #ffaa7f;
}
</style>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
2.v-bind
动态地绑定一个或多个属性，或一个组件 prop 到表达式。
- v-bind缩写为‘ : ’
- 在绑定
prop时，prop必须在子组件中声明。 - 可以用修饰符指定不同的绑定类型。
<image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<button v-bind:disabled="isButtonDisabled">Button</button>
复制代码
如果 isButtonDisabled 的值是 null 、undefined 或 false ，则 disabled 甚至不会被包含在渲染出来的 button 元素中。
#v-on
v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件
<!-- 完整语法 -->
<view v-on:click="doSomething">点击</view>
<!-- 缩写 -->
<view @click="doSomething">点击</view>
3.v-for
在 v-for 里使用数组
v-for 指令可以实现基于一个数组来渲染一个列表。
v-for指令需要使用
item in items形式的特殊语法，其中
items是源数据数组，而
item则是被迭代的数组元素的别名。
- 第一个参数
item则是被迭代的数组元素的别名。 - 第二个参数，即当前项的索引
index，是可选的。
- 第一个参数
<template>
<view>
<view v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
}
}
</script>
结果：
0 - Foo
1 - Bar
#在 v-for 里使用对象
你也可以用 v-for 来遍历一个对象的 property。
- 第一个参数
value是被迭代的对象元素的属性值。 - 第二个参数为
property名称 (也就是键名)。 - 第三个参数作为索引。
<template>
<view>
<view v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2020-04-10'
}
}
}
}
</script>
结果：
0.title: How to do lists in Vue,
1.author: Jane Doe,
2.publishedAt: 2020-04-10
#列表渲染分组
类似于 v-if，你也可以利用带有 v-for 的 template 来循环渲染一段包含多个元素的内容。比如：
<template v-for="item in items">
<view>{{ item.message }}</view>
<view class="divider" role="presentation"></view>
</template>
复制代码
#key
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。
:key 的值以两种形式提供
- 使用
v-for循环array中item的某个property，该property的值需要是列表中唯一的字符串或数字，且不能动态改变。 - 使用
v-for循环中item本身，这时需要item本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 :key，会报一个
warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
示例：
<template>
<view>
<!-- array 中 item 的某个 property -->
<view v-for="(item,index) in objectArray" :key="item.id">
{{index +':'+ item.name}}
</view>
<!-- item 本身是一个唯一的字符串或者数字时，可以使用 item 本身 -->
<view v-for="(item,index) in stringArray" :key="item">
{{index +':'+ item}}
</view>
</view>
</template>
<script>
export default {
data () {
return {
objectArray:[{
id:0,
name:'li ming'
},{
id:1,
name:'wang peng'
}],
stringArray:['a','b','c']
}
}
}
</script>
#注意事项
- 在H5平台 使用 v-for 循环整数时和其他平台存在差异，如
v-for="(item, index) in 10"中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。 - 在非H5平台 循环对象时不支持第三个参数，如
v-for="(value, name, index) in object"中，index 参数是不支持的。 - 小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据（相关反馈）。
#在组件上使用 v-for
在自定义组件上，你可以像在任何普通元素上一样使用 v-for 。
<my-component v-for="item in items" :key="item.id"></my-component>
当在组件上使用 v-for 时，key是必须的。