vue常用指令

一、v-if 指令

v-if 用于根据条件来决定是否渲染元素。当条件为真时，元素会被渲染；条件为假时，元素不会被渲染。

<div v-if="show">
  <p>我被显示了，因为条件为真</p>
</div>

<script>
new Vue({
  data: {
    show: true
  }
})
</script>

二、v-else 指令

与 v-if 配合使用，当 v-if 的条件为假时，v-else 对应的元素会被渲染。

<div v-if="show">
  <p>条件为真时显示我</p>
</div>
<div v-else>
  <p>条件为假时显示我</p>
</div>

<script>
new Vue({
  data: {
    show: false
  }
})
</script>

三、v-show 指令

通过控制元素的 display 属性来实现显示或隐藏元素。与 v-if 的区别在于，v-show 始终会渲染元素，只是通过样式控制其显示与否。

<div v-show="show">
  <p>我通过样式控制显示或隐藏</p>
</div>

<script>
new Vue({
  data: {
    show: true
  }
})
</script>

四、v-for 指令

用于遍历数组或对象来渲染多个元素。

• 遍历数组：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

<script>
new Vue({
  data: {
    items: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橙子' }
    ]
  }
})
</script>

• 遍历对象：

<ul>
  <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
</ul>

<script>
new Vue({
  data: {
    user: {
      name: '张三',
      age: 25,
      city: '北京'
    }
  }
})
</script>

五、v-bind 指令

用于动态绑定元素的属性。

<img v-bind:src="imageUrl" />

<script>
new Vue({
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
})
</script>

还可以使用简写形式 : ：

<img :src="imageUrl" />

六、v-on 指令

用于监听 DOM 事件。

<button v-on:click="handleClick">点击</button>

<script>
new Vue({
  methods: {
    handleClick: function() {
      console.log('点击了按钮');
    }
  }
})
</script>

简写形式为 @ ：

<button @click="handleClick">点击</button>

七、v-model 指令

实现表单元素和数据的双向绑定。

<input v-model="message" />

<script>
new Vue({
  data: {
    message: ''
  }
})
</script>