Vue常见指令

Vue 中的指令按照不同的用途可分为6大类：

内容渲染指令
属性绑定指令
事件绑定指令
双向绑定指令
条件渲染指令
列表渲染指令

内容渲染

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常见的内容渲染指令有3个：v-text、{{ }}、v-html。

v-text

会覆盖掉元素里面的内容。

专业名称是插值表达式（Mustache），专门用来解决 v-text 会覆盖默认文本内容的问题。

插值表达式可以使用过滤器：


<div id="app">
  <p>{{message | capitalize}}</p>
</div>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "i love vue！",
    },
    filters: {
      capitalize(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
      },
    },
  });
</script>

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能。

v-html

用来输出html元素内容，会覆盖掉元素里面的内容。

属性绑定指令

v-bind

给元素属性动态绑定属性值，可简写为:。


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

v-bind属于单向绑定，即JS修改->HTML修改。

v-bind动态绑定多个值：


<template>
  <div v-bind="obj">测试一下</div>
</template>
<script>
export default {
data() {
return {
obj: {
id: 'id',
class: 'class',
},
}
},
}
</script>

v-bind操作class：

="{类名1: 布尔值, 类名2: 布尔值}"
="[类名1, 类名2, 类名3]"

事件绑定指令

v-on

事件相关的指令，如：

v-on
v-on
v-on
v-on::mouseout
v-on
v-on
v-on
v-on

v-on:可简写为@。Vue中的Event对象，就是原生JS的Event对象。

双向绑定指令

v-model

可以在表单input、textarea以及select元素上创建双向数据绑定。


<body>
<div id="app">
<div>
用户名：<input type="text" v-model="user">
</div>
<div>
密码：<input type="password" v-model="pwd">
</div>
<input type="button" value="登录" v-on:click="clickMe">
<input type="button" value="重置" v-on:click="resetForm">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
user: "",
pwd: ""
},
methods: {
clickMe: function () {
console.log(this.user, this.pwd)
},
resetForm: function () {
this.user = '';
this.pwd = '';
}
}
});
</script>
</body>

为了方便对用户输入的内容进行处理，Vue 为 v-model 指令提供了 3 个修饰符，分别是：

.number，自动将用户的输入值转为数值类型
.trim，自动过滤用户输入的首尾空白字符
.lazy，在“change”时而非“input”时更新

用法如下：


<input type="text" v-model.number="n1" /> +
<input type="text" v-model.number="n2" /> =
<span>{{n1 + n2}}</span>

条件渲染指令

v-if

动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏。

v-if 可以单独使用，或配合 v-else（v-else-if）指令一起使用。

v-show

动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏。

区别

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

列表渲染指令

v-for


<div id="app">
<ul>
<li v-for="(p,index) in persons" :key="p.id">
{{index}}: {{p.name}} - {{p.age}}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
persons: [
{ id: "001", name: "张三", age: 18 },
{ id: "002", name: "李四", age: 19 },
{ id: "003", name: "王五", age: 20 },
],
},
});
</script>

也可以使用 of 作为分隔符来替代 in ，这更接近JavaScript的迭代器语法：v-for="item of items"。

循环尽量不要和v-if同时使用，因为v-if的优先级更高。

目录