Class与Stayle的绑定

作⽤：处理⻚⾯样式，动态的绑定样式
绑定⽅式： class：v-bind:class的⽅式绑定样式，其值可以有三种形式，
分别为：字符串、对象、数组
style：v-bind:style绑定样式需要将加的样式使⽤ {} 括起来，需要将横杠格式的样式变为驼峰格式，
例如：font-size要变为：fontSize 示例：

class绑定

     <div id="app">
     <!-- 字符串写法 -->
     <!-- <p class="common" :class="currentStatus">这是⼀个P标签</p> -->
     <!-- 数组写法 -->
     <!-- <p :class="[currentStatus, 'common']">这是第⼆个P标签</p> -->
     <!-- 对象写法 -->
     <p :class="{ 'success': currentStatus == 'success', 'fail': curre
    ntStatus == 'fail'}">这是第三个P标签</p>
     <button @click="currentStatus = 'fail'">change</button>

     <script>
     const { createApp } = Vue
     createApp({
     data() {
     return {
     currentStatus: 'success',
     }
     }
     }).mount('#app')
    </script>

Style绑定

     <div id="app">
     <!-- 原本的写法 -->
     <!-- <div style="font-size: 30px;">这是内部的⽂字</div> -->
     <!-- Vue动态的写法 -->
     <div :style="{fontSize: size+'px',color: fontColor}">这是内部的⽂字
    </div>
     <button @click="changeSize">放⼤</button>
     </div>
     <script>
     const { createApp } = Vue;
     createApp({
     data() {
     return {
     size: 16,
     fontColor: '#'
     }
     },
     methods: {
     changeSize() {
     this.size += 2;
     const letters = '0123456789ABCDEF';
     this.fontColor = '#';
     for (let i = 0; i < 6; i++) {
     this.fontColor += letters[Math.floor(Math.random()
    * 16)];
     }
     }
     }
     }).mount('#app');
     </script>