vue事件绑定与渲染

目录

语法

绑定样式

双向数据绑定

条件渲染

v-if和v-show的区别

循环渲染

---

语法

基础语法：v-on:事件类型="事件方法"，<button v-on:click="btnClick">按钮</button>

语法糖：将“v-on写成@”，<button @click="btnClick">按钮</button>

绑定样式

vue的样式绑定有内联绑定和绑定样式类两种方法，这两种方法都是需要使用v-bind和data中的数据对页面的样式进行操作。

绑定样式类可以有三种操作方法：

变量绑定：

 

对象绑定：

 

数组绑定：

<div :class="['box',B,{box3:true,box4:false}]">
        {{msg}}
 </div>

内联绑定的操作方法示例：

 

双向数据绑定

v-model：v-model用于表单数据的双向绑定，它是一个语法糖，这个背后做了两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

修饰符：

• lazy： 当用户使用v-model之后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改。
• trim： 用户可能输入的字符串中含有空格，这样系统在处理时可能会出现错误。使用trim修饰符来去掉字符串首部或者尾部的所有空格。
• number：将用户在输入框中输入的数字转成number类型。

条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。你也可以使用 v-else 为 v-if 添加一个“else 区块”。

v-if和v-show的区别

v-if 和 v-show 的主要区别在于它们如何处理条件渲染。v-if 在条件改变时会实际添加或删除元素，适用于不需要经常切换的场景。而 v-show 只修改元素的可见性，适用于需要频繁切换可见性的场景。

• 渲染方式：

v-if：当条件为真时，元素会被渲染到 DOM 中。当条件为假时，元素会从 DOM 中移除。换句话说，v-if 会根据条件实际地添加或删除元素。v-show：无论条件是否为真，元素始终保留在 DOM 中。当条件为假时，元素的 CSS 属性 display 会被设置为 none，使其不可见。条件改变时，v-show 仅修改元素的可见性。

• 性能：

v-if：由于 v-if 指令会在条件改变时实际添加或删除元素，当元素需要频繁切换时，可能会导致性能下降。但对于不需要经常切换的元素，v-if 的性能影响很小。v-show：由于 v-show 只是修改元素的 CSS 属性，所以在需要频繁切换元素可见性时，性能比 v-if 更好。

• 初始化：

v-if：如果初始条件为假，v-if 指令的元素不会被渲染，因此其内部的子组件和指令也不会被初始化。v-show：即使初始条件为假，v-show 指令的元素仍会被渲染，只是设置为不可见。这意味着元素内部的子组件和指令始终会被初始化。

循环渲染

v-for这个指令所在的元素的整个模板会被克隆，数组的元素个数有多少就克隆几次。如果v-if和v-for被放在同一个行内使用，vue2.x版本中，v-for的优先级更高，vue3.x版本中，v-if的优先级更高，而在官方中，则是不建议将这两个指令放在同一个元素中使用。