8. 绑定样式 && 条件渲染

绑定样式

写法

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

<div id="room">
        <!-- 1.绑定 class样式---字符串写法 -->
        <!-- 基本样式正常写，变化的样式利用v-bind绑定起来 -->
        <!-- mood改变时类名改变，样式随之改变 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div> </br>

        <!-- 2.绑定 class样式---数组写法 -->
        <!-- classArr数组里对应的类名的样式都使用 -->
        <div class="basic" :class="classArr" @click="changeMood">{{name}}</div> </br>

        <!-- 3.绑定 class样式---对象写法  -->
        <!-- 在对象的类名属性里设置布尔值表示用或不用 -->
        <div class="basic" :class="classObj">{{name}}</div></br>


        <!-- 绑定 style样式---对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> </br>
		
        <!-- 绑定 style样式---数组写法 -->
        <div class="basic" :style="[styleObj, styleObj2]">{{name}}</div> </br>
		
        <!-- 绑定 style样式---数组写法2 -->
        <!-- 一个大数组里包含多个stlye对象 -->
        <div class="basic" :style="styleArr">{{name}}</div> </br>

</div>

<script>
        const vm = new Vue({
            el: '#room',
            data: {
                name: 'cloud',
                mood:' normal',
                classArr: ['a1','a2','a3'],
                classObj: {
                    a1: false,
                    a2: false
                },
                styleObj:{
                    fontSize: 40 + 'px'
                },
                styleObj2: {
                    backgroundColor: 'orange'
                },
                styleArr: [
                {
                    fontSize: 40 + 'px'
                },
                {
                    backgroundColor: 'hotpink'
                },
                ]
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'normal', 'sad']
                    // Math.random()：生成随机数[0,1)
                    //Math.floor()
                    const index = Math.floor(Math.random()*3)
                    this.mood = arr[index]
                }
            }
        })
</script>

条件渲染

v-if

写法

1. v-if="表达式"
2. v-else-if="表达式"
3. v-else="表达式"
   适用于： 切换频率较低的场景。

特点

不展示的DOM元素直接被移出。

注意： v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。

v-show

写法

v-show="表达式"
适用于：切换频率较高的场景

特点

不展示的DOM元素未被移出，仅仅是使用样式style="display: none;"隐藏掉。

v-if VS v-show

1. 使用v-if时，元素可能无法获取到（值flase时，因为元素直接被移除了），而使用v-show一定能获取到。
2. template只能和v-if配合使用。

<div id="room">
        <!-- 使用v-show条件渲染 -->
        <!-- v-show如果为false，模板会设style= "dispaly = none;"这个样式 -->
        <h1 v-show="false">Hello, {{name}}</h1>
        <h1 v-show="1===1">Hello, {{name}}</h1>

        <!-- 使用v-if条件渲染 -->
        <!-- v-if如果为false模板不显示 -->
        <h1 v-if="false"> Hello, {{name}}</h1>
        <h1 v-if="1===1">Hello, {{name}}</h1>

        <button @click="n++">n={{n}}</button>
        <!-- <div v-show="n === 1">狸猫</div>
        <div v-show="n ===2">米米</div>
        <div v-show="n === 3">狸米</div> -->

        <!-- 这样一个成立就不会去判断下面的elseif，如果全写成if会全部判断一遍 -->
        <div v-if="n === 1">狸猫</div>
        <div v-else-if="n ===2">米米</div>
        <div v-else-if="n === 3">狸米</div>
        <div v-else>哈哈哈</div>


        <!-- template 是模板，渲染时会自动去掉，对模板里的结构没有影响-->
        <!-- template只能和v-if配合使用 -->
        <template v-if="0">
            <h2>1</h2>
            <h2>2</h2>
            <h2>3</h2>   
            
        </template>
</div>
<script>
        new Vue({
            el: '#room',
            data: {
                name: 'cloud',
                n: 0
            }
        })
</script>