style和class

数据的绑定

　　语法：

　　　　:属性名=js变量/js语法　　　　

　　　　:class=’js变量、字符串、js数组’

　　class：三目运算符、数组、对象{red: true}

　　　　:style=’js变量、字符串、js数组’

　　style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Style 和 Class</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        .red {
            color: rgba(255, 104, 104, 0.7);
        }
        .font-20 {
            font-size: 20px;
        }
        .be-bold {
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="box">
    <p>我是一个普通的p标签</p>
    <div :class="class_obj">
        <p>我是一个不普通的p标签1</p>
    </div>

    <button @click="handleClick">点击放大字体</button>
    <div :style="style_obj">
        <p>我是一个不普通的p标签2</p>
    </div>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            // class_obj: 'red',    // 放1个是字符串
            class_obj: ['red', 'font-20', 'be-bold'],    // 放2个是数组
            // class_obj: { red:true, be-bold:false},    // 也可以放对象
            // 数组.push()   从尾部添加1个元素
            // 数组.pop()    删除最后1个元素 并返回

            // 对象的写法
            style_obj: {
                color: 'red',
                fontSize: '20px'
            }
            // style_obj: [{background:'red'}, {fontSize:'20px'}]

        },
        methods: {
            handleClick(){
                this.style_obj['fontSize']='30px'
            }
        }

    })
</script>
</html>

　　下方试验的命令

vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')

posted @ 2022-04-12 18:05  那就凑个整吧  阅读(81)  评论(0)  编辑  收藏  举报