Vue3 指令学习笔记

1. v-model 指令

v-model 指令用于实现双向数据绑定，通过将表单元素的值与组件内的数据属性进行双向绑定。当用户在表单元素中输入时，组件内的数据也会跟着变化，反之亦然。

示例

htmlCopy Code
<template>
  <div>
    <label>姓名：</label>
    <input type="text" v-model="name" />
    <p>您的姓名是：{{ name }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    }
  }
</script>

2. v-bind 指令

v-bind 指令可以动态地绑定一个或多个 HTML 特性，例如 id、class、style 等等。它可以接受一个 JavaScript 表达式作为参数，用于计算绑定结果。

示例

htmlCopy Code
<template>
  <div :class="classObj">
    <p v-bind:title="message">鼠标悬停此处以查看提示信息</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '这是一个提示信息',
        classObj: {
          'red-text': true,
          'bold-text': false
        }
      }
    }
  }
</script>

3. v-if 和 v-show 指令

v-if 和 v-show 指令都用于控制元素的显示与隐藏，它们之间的区别在于，v-if 是动态地切换元素的存在与否，而 v-show 则只是通过修改 CSS 属性来控制元素是否可见。

示例

htmlCopy Code
<template>
  <div>
    <button @click="toggle">切换</button>
    <p v-if="show">{{ message }}</p>
    <p v-show="show">{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        message: '这是一段文字'
      }
    },
    methods: {
      toggle() {
        this.show = !this.show
      }
    }
  }
</script>

4. v-for 指令

v-for 指令用于循环渲染列表数据，它可以接受一个数组或对象作为参数，并遍历其中的每一项来渲染对应的视图内容。在遍历过程中，v-for 指令还可以提供当前项的索引值、键名等信息，以便处理更加复杂的逻辑需求。

示例

htmlCopy Code
<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        list: ['苹果', '香蕉', '橘子']
      }
    }
  }
</script>