10.14课堂记录

一：绑定style属性：

01，以对象方式绑定style属性：

<div id="app">
        <div style=" color:blue; font-size:25px">我是div0</div>

        <!-- 把样式属性改造成对象属性 ：
                要用大括号包裹起来；
            把样式转换为属性值，用引号引起来
        把分号改成逗号
        样式名转换为对象的属性名-->
        <div v-bind:style="{ color:'blue',fontSize:25px }">我是div0</div>

        <!-- 把对象值改变成变量 -->
        <!-- 代表样式color没有写死，而是根据变量color的值来，变量color是什么，样式color就是什么。 -->
        <div v-bind:style="{ color:color, fontSize:fontsize}">我是div0</div>

        <!-- 以对象方式绑定style属性：
        属性名对应的样式名，
        属性值对应的样式值，一般给变量 -->
    </div>

<script src="../vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data:{
                color:'red',
                fontsize:'50px',
            }
        })
    </script>

02，绑定style属性：

<div id="app">
        <!-- 想要动态的设置class，也是给一个对象 -->
        <!-- 属性名：计算类名 -->
        <!-- 属性值是布尔值，如果给true，代表有这个类目；如果给false -->
        <div class="box" v-bind:class="{bg:isBG}">

        </div>
        <button @click="btn">更改背景颜色</button>
    </div>

    <script src="../vue.js"></script>

     
<div id="app">
 
    <!-- 可以控制属性名添加 -->
    <div class="box" :class="{bg:isBg}"></div>
     
    <button @click="beiji">点击换背景</button>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
          //  true 添加   false 不添加
            isBg: false,
        },
        // 事件
        methods: {
            beiji() {
                if (this.isBg == false) {
                    this.isBg = true;
                } else {
                    this.isBg = false;
                }
            }
        },
    })
</script>

<style>
        .box{
            width: 300px;
            height: 300px;
            border: 10px solid rgb(128, 54, 54);
        }
        .bg{
            background-color: green;
        }
    </style>