当前位置：首页 > ai >正文

【Vue2 ✨】 Vue2 入门之旅（六）：指令与过滤器

ai 2025/9/3 9:42:45

前一篇我们学习了组件化开发。本篇将介绍 指令与过滤器，这是 Vue 模板语法的重要扩展，让页面渲染更加灵活。

常见内置指令

Vue 提供了丰富的内置指令，常见的有：

<div id="app"><p v-text="msg"></p><p v-html="htmlContent"></p><p v-show="isVisible">这是一段文字</p>
</div><script>
new Vue({el: '#app',data: {msg: 'Hello Vue!',htmlContent: '<strong>加粗的文字</strong>',isVisible: true}
})
</script>

在这里插入图片描述

v-text：设置元素的文本内容
v-html：渲染 HTML（⚠️注意防止 XSS 攻击）
v-show：通过 display 控制显示/隐藏
v-if / v-else / v-else-if：条件渲染
v-for：列表渲染
v-on：事件绑定
v-bind：属性绑定

自定义指令

除了内置指令，还可以自定义指令，用于 DOM 操作。

全局自定义指令

<div id="app"><input v-focus>
</div><script>
Vue.directive('focus', {inserted: function (el) {el.focus()}
})new Vue({el: '#app'
})
</script>

这里定义了一个 v-focus 指令，让输入框自动获取焦点。

Vue.directive() 用于注册全局自定义指令
第一个参数 ‘focus’ 是指令名称；第二个参数是一个配置对象，包含指令的钩子函数。

inserted 钩子函数
当指令绑定的元素被插入到 DOM 中时触发（此时元素已存在于页面中），参数 el 是指令所绑定的 DOM 元素

局部自定义指令

<div id="app"><p v-color="'red'">这是一段红色文字</p>
</div><script>
new Vue({el: '#app',directives: {color: function (el, binding) {el.style.color = binding.value}}
})
</script>

这里的 v-color="'red'" 会让文字变成红色。

过滤器

过滤器可以对文本进行格式化处理，常见场景是日期、货币格式化。

全局过滤器

<div id="app"><p>{{ price | currency }}</p>
</div><script>
Vue.filter('currency', function (value) {return '¥' + value.toFixed(2)
})new Vue({el: '#app',data: {price: 88.5}
})
</script>

输出：

¥88.50

局部过滤器

<div id="app"><p>{{ message | upper }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'hello vue'},filters: {upper: function (value) {return value.toUpperCase()}}
})
</script>