Vue核心 绑定样式 条件渲染

绑定样式

class样式

• 写法：:class=“xxx” ,xxx可以是字符串、数组、对象.
• :style=“[a,b]” 其中a、b是样式对象
• :style="{fontsize: xxx}” 其中xxx是动态值
• 字符串写法适用于：类名不确定，要动态获取
• 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
• 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

条件渲染

v-if

v-if="表达式"
v-else-if="表达式"
v-else

• 适用：切换频率较低的场景，因为不展示的DOM元素直接被移除
• ·注意：v-if可以和v-else-if v-else一起使用，但要求结构不能被打断

v-show

• v-show=“表达式”
• 适用于：切换频率较高的场景
• ·特点：不展示的 DOM元素未被移除，仅仅是使用样式隐藏掉display: none

备注：

• 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
• template标签不影响结构，页面html中不会有此标签，但只能配合v-if，不能配合v-show