uniapp数据绑定、插值、v-bind、v-for

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 - Foo1 - 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是必须的。