vue--2.方法、事件绑定、样式绑定、条件渲染和循环渲染

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.方法

2.事件绑定

1）v-on命令

2）@命令

3.样式绑定

(1) class绑定

(2) style绑定

4.条件渲染

5.循环渲染(重点)

（5.1）循环渲染中K的意义

---

---

1.方法

methods:定义事件的处理函数

在methods中写方法,供事件或者别的方法内部调用

2.事件绑定

v-on: 和  @ 都是绑定事件的指令

指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加

1）v-on命令

2）@命令

3.样式绑定

(1) class绑定

对象语法,v-bind:class 指令也可以与普通的 class 属性共存

class绑定的三种格式：

(2) style绑定

style绑定的三种格式：

4.条件渲染

v-if /v-else 或者 v-show

1.使用的变量为true就显示,false就隐藏

2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果

3.v-if的做法是删除节点,v-show做法是操作css的display:none

4.这v-if和v-show两个谁好?(面试)
        根据它们底层的设计不一样有各自的使用场景
        v-if具有较高的 切换消耗,常常用在用户不常切换的模块
        v-show具有较高的性能消耗,常常用在频繁切换的模块中

5.循环渲染(重点)

1、for和if放在了同一个标签中 没有先后顺序的要求,但是先执行for

      渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

      这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

2、解决方案把for弄到最外层(面试)

        如果if和for套在一层,数据容器发生变化时,if会重新判断一遍 嵌套的写法 数据容器变化时 if只判断新增的数据 这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

        这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中

        解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment

模板如下：

（5.1）循环渲染中K的意义

key 意义:

            让数据跟真实的dom一一关联，使之不发生渲染混乱的情况

            提高绘制渲染效率

示例应用如下：