Vue之绑定class/style样式与条件渲染

1.绑定class样式:

<div id="root">
<!--    绑定class样式--字符串写法，适用于：样式的类名不确定，要动态确定-->
    <div class="basic" :class="mood" @click="change()">{{name}}</div>
    <hr>
<!--    以数组写法绑定-->
    <div class="basic" :class="arr" @click="change()">{{name}}</div>
<!--    对象形式绑定-->
    <div class="basic" :class="obj">{{name}}</div>
</div>

<script>
    new Vue({
        el:'#root',
        data:{
            name:"ykw",
            mood:'happy',
            arr:['file','file2','file3'],
            obj:{
                worry:true,
                happy:true
            }

        },
        methods:{
            change(){
                const arr=['happy','normal','worry']
                const index=Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        }
    })
</script>

2.绑定style样式

<div id="root">
<!--    绑定class样式--字符串写法，适用于：样式的类名不确定，要动态确定-->
    <div class="basic" :class="mood" @click="change()">{{name}}</div>
    <hr>
<!--    以数组写法绑定-->
    <div class="basic" :class="arr" @click="change()">{{name}}</div>
<!--    对象形式绑定-->
    <div class="basic" :class="obj">{{name}}</div>
<!--    绑定style样式 对象写法-->
    <br>
    <div class="basic" :style="styleobj" >{{name}}</div>
    <!--    绑定style样式 数组写法-->
    <div class="basic" :style="[styleobj,styleobj2]" >{{name}}</div>
</div>

<script>
    new Vue({
        el:'#root',
        data:{
            name:"ykw",
            mood:'happy',
            arr:['file','file2','file3'],
            obj:{
                worry:true,
                happy:true
            },
            styleobj:{
                fontSize: '40px',
                color:'red',
                backgroundColor:'blue'

            },
            styleobj2:{
                backgroundColor:'blue'
            },
        },
        methods:{
            change(){
                const arr=['happy','normal','worry']
                const index=Math.floor(Math.random()*3)
                this.mood=arr[index]
            }
        }
    })
</script>

总结：

 二：条件渲染

        v-if: 布尔类型      v-else-if：   v-else:            v-show:  布尔类型

<div id="root">
<!--    false：隐藏 true:显示-->
    <h1 v-show="a">欢迎{{name}}</h1>
<!--    还可以写表达式，-->
    <h1 v-show="1===1">欢迎{{name}}</h1>

<!--    v-if判断,为false就不会看见-->
    <h1 v-if="false">欢迎{{name}}</h1>
    <h1 v-if="1===1">欢迎{{name}}</h1>
</div>
<script>

    const vm = new Vue({
        el:'#root',
        data:{
            name:'ykw',
            a:false
        }
    })

</script>

2.2 template不会破坏结构，只能配合v-if，不能配合v-show -->

<!--   template不会破坏结构，只能配合v-if，不能配合v-show -->
    <template v-if="true">
        <h1>hello</h1>
        <h1>ykw</h1>
        <h1>2022</h1>
    </template>