Vue常用指令

Vue.js 提供了很多内置指令来帮助我们处理常见的 DOM 操作。下面是一些 Vue 中常见指令的用法实例：

1. v-bind：动态绑定一个或多个属性，或一个组件 prop 到表达式。

<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

data() {
  return {
    imageSrc: 'https://example.com/image.jpg'
  }
}

2. v-model：在表单输入和应用状态之间创建双向数据绑定。

<input v-model="message" placeholder="Enter some text...">
<p>Message is: {{ message }}</p>

data() {
  return {
    message: ''
  }
}

3. v-if / v-else / v-else-if：根据表达式的值的真假条件渲染元素。

<div v-if="type === 'A'">Render A</div>
<div v-else-if="type === 'B'">Render B</div>
<div v-else>Render Others</div>

data() {
  return {
    type: 'A'
  }
}

4. v-for：基于源数据多次渲染元素或模板块。

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

data() {
  return {
    items: ['Apple', 'Banana', 'Cherry']
  }
}

5. v-on：监听 DOM 事件，并在触发时执行一些 JavaScript 代码。

<button v-on:click="increment">Increment</button>

<!-- 缩写 -->
<button @click="increment">Increment</button>

data() {
  return {
    counter: 0
  }
},
methods: {
  increment() {
    this.counter++;
  }
}

6. v-show：根据表达式之真假值，切换元素的 display CSS 属性。

<p v-show="isVisible">Hello, Vue!</p>

data() {
  return {
    isVisible: true
  }
}

7. v-text 和 v-html：更新元素的 textContent 或 innerHTML。

<p v-text="message"></p>
<p v-html="htmlContent"></p>

data() {
  return {
    message: 'Hello, Vue!',
    htmlContent: '<strong>Hello, Vue!</strong>'
  }
}

这些只是 Vue 中指令的一部分，Vue 还提供了很多其他指令和自定义指令的功能。在实际开发中，你可以根据需要选择适当的指令来实现所需的功能。