当前位置：首页 > VUE

vue指令实现常见功能

2026-01-21 22:41:34VUE

v-model 实现双向数据绑定

v-model 用于表单元素（如 <input>、<textarea>、<select>）与数据的双向绑定。

<template>
  <input v-model="message" placeholder="输入内容">
  <p>当前内容: {{ message }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-for 渲染列表

v-for 遍历数组或对象生成动态内容，需配合 :key 提升性能。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { name: '商品A', price: 100 },
        { name: '商品B', price: 200 }
      ]
    };
  }
};
</script>

v-if/v-show 条件渲染

v-if：动态添加/移除 DOM 元素，适合切换频率低的场景。

v-show：通过 display: none 隐藏元素，适合频繁切换。

<template>
<div v-if="isVisible">v-if 控制的元素</div>
<div v-show="isVisible">v-show 控制的元素</div>
<button @click="isVisible = !isVisible">切换显示</button>
</template>
<script>
export default {
data() {
  return {
    isVisible: true
  };
}
};
</script>

v-bind 动态绑定属性

缩写为 :，用于动态绑定 HTML 属性或组件 props。

<template>
  <img :src="imageUrl" :alt="imageAlt">
  <button :disabled="isDisabled">提交</button>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: '/path/to/image.jpg',
      imageAlt: '示例图片',
      isDisabled: false
    };
  }
};
</script>

v-on 绑定事件监听器

缩写为 @，用于监听 DOM 事件或自定义事件。

<template>
  <button @click="handleClick">点击事件</button>
  <input @keyup.enter="handleEnter">
</template>
<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击');
    },
    handleEnter() {
      console.log('按下了回车键');
    }
  }
};
</script>

v-once 单次渲染

v-once 使元素及其子元素只渲染一次，后续数据变化不再更新。

<template>
  <div v-once>{{ staticContent }}</div>
</template>
<script>
export default {
  data() {
    return {
      staticContent: '初始内容'
    };
  }
};
</script>

v-html 渲染原始 HTML

谨慎使用，避免 XSS 攻击，仅渲染可信内容。

<template>
  <div v-html="rawHtml"></div>
</template>
<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: red">红色文本</span>'
    };
  }
};
</script>

自定义指令

通过 directives 创建自定义指令，例如实现自动聚焦：

<template>
  <input v-focus>
</template>
<script>
export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};
</script>

vue指令实现常见功能