Vue基础2

Vue基础2

目录

• 绑定样式
• 条件渲染

绑定样式

1. class样式

• 写法:class=“xxx” xxx可以是字符串、对象、数组。
• 字符串写法适用于：类名不确定，要动态获取。
• 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
• 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

• :style="{fontSize: xxx}"其中xxx是动态值。
• :style="[a,b]"其中a、b是样式对象。

<!-- 绑定class样式--字符写法，适用于：样式的类名不确定，需要动态实现 -->
        <div class="basic" :class="mode" @click="changeMode">{{name}}</div>
        <br>
        <!-- 绑定class样式--数组写法，适用于：样式的个数不确定，名字也不确定，需要动态实现 -->
        <div class="basic" :class="arr">{{name}}</div>
        <!-- 绑定class样式--数组写法，适用于：样式的个数确定，名字也确定，需要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>

条件渲染

1. v-if
   写法：
   (1).v-if=“表达式”
   (2).v-else-if=“表达式”
   (3).v-else=“表达式”
   适用于：切换频率较低的场景。
   特点：不展示的DOM元素直接被移除。
   注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

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

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
        <!-- 使用v-show做条件渲染，只是将节点隐藏或者展示 -->
        <h2 v-show="a">欢迎来到{{name}}</h2>
        <h2 v-show="1 === 1">欢迎来到{{name}}</h2>

        <!-- 使用v-if做条件渲染，会直接删除添加节点 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>
        <!-- v-else和v-else-if，不能被打断 -->
        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 1">React</div>
        <div v-else-if="n === 3">Vue</div>
        <div v-else="n === 4">hh</div>
        <!-- v-if与template的配合使用 -->
        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>