Vue的指令/条件渲染

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情juejin.cn/post/714765…

v-if=“值” 如果v-if=“”的值可以决定组件是否渲染或者是否销毁。 如果某一个组件自身切换，就可以用v-if

两个组件之间切换

使用v-if=""和v-else

用key管理可复用的元素。

如果两个组件结构一致，会出现复用。复用的是节点，原来的vDOM并没有改变，只是文本内容变了，placeholder失效了。只有在input里会出现placeholder失效，如果是普通的组件切换，是很优化的，比如普通的div，他们只会文本不一样，涉及不到placeholder，如果不想让他们复用，就给他们添加key值。

v-else-if 在2.1.0新增。顾名思义，用作V-if 的else-if 块。可以链式的多次使用

<div id="app">
    <p v-if="str=='aa'>aa</p >
    <p v-else-if="str=='bb">bb</p >
    <p v-else-if="str==cc">cc</p >
</div>

•v-else和v-else-f必须跟在v-i或者v-else-if之后

key的作用之一：

用来标识两个不同的组件

事件处理函数写在methods：{键名1：事件函数1，键名2：事件函数2}

事件函数里的this指的就是当前组件

v-show=""

• 作用：是通过css样式控制组件显示隐藏。
• 而v-if是真正的销毁其中一个组件。
• 如果频繁的切换，就可以使用v-show。v-if是惰性的，如果一开始v-if就是false，浏览器就不会搭理这一部分代码，只有v-if=“true”的时候，才去读取它。v-if有更高的切换消耗。