vue常用指令代码实例总结

Vue常用指令代码实例总结攻略

什么是Vue指令

Vue指令是一种特殊的HTML属性, 它们以v-前缀开头，用于渲染模板。指令中可以包含绑定表达式，该表达式的值被动态计算，并且可以自动响应数据变化。

Vue指令有很多种，下面我们来详细讲解一些常用指令的代码实例。

v-if指令

v-if 指令用于根据表达式的值来有条件地渲染某个元素，如果表达式的值为false，元素将不会被渲染。

<div v-if="isShow">{{message}}</div>

new Vue({
  el: '#app',
  data: {
    isShow: true,
    message: 'Hello World!'
  }
});

在上面的代码中，当isShow的值为true时，会根据绑定的表达式动态渲染相应元素，此时页面将会显示"Hello World!"文本。否则，该元素将不会被渲染。

v-for指令

v-for指令用于根据数组元素的数据使用循环来渲染列表。

<ul>
  <li v-for="(item, index) in list" :key="item.id">
    {{ index + 1 }}. {{ item }}
  </li>
</ul>

new Vue({
  el: '#app',
  data: {
    list: [
      'apple',
      'banana',
      'cherry'
    ]
  }
});

在上面的代码中，v-for会遍历list数组，根据每个元素生成相应的li元素来渲染列表。列表中的每一项都会显示在页面上，如下图所示：

1. apple
2. banana
3. cherry

小结

Vue的指令有很多种，以上的两种是常用的指令，在实际项目开发中经常会使用到。我们希望通过这篇攻略帮助新手更加深入地了解Vue的指令。