谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if

<template>
  <div>
    <!-- 使用v-on指令绑定click事件 -->
    <button v-on:click="handleClick">点击我</button>
 
    <!-- 使用v-for指令循环渲染数组中的元素 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
 
    <!-- 使用v-if指令条件渲染元素 -->
    <div v-if="show">我是可见的</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 定义数组items
      items: ['苹果', '香蕉', '橙子'],
      // 定义布尔值show
      show: true
    }
  },
  methods: {
    // 定义事件处理函数
    handleClick() {
      alert('按钮被点击了！');
    }
  }
}
</script>

这个例子展示了如何在Vue组件中使用v-on、v-for和v-if指令。v-on用于绑定一个事件监听器，v-for用于基于数组或对象渲染一个列表，v-if用于条件性地渲染一个元素。代码中还展示了如何在methods中定义事件处理函数。