vue类值控制

1.操作样式

控制标签class类名

格式：
<h1 :class="值">元素</h1> 值可以是对象、对象名、数组（数组的方式用的比较少）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .c1{
            color:red;
        }
        .c2{
            color:green;
        }
    </style>

</head>
<body>
<div id="xx">
<!--    <p>淫湿一手</p>-->
<!--    <p class="c1" :class="{c2:num<=10}">床前明月光</p>-->
<!--    <p :class="{c1:num>10,c2:num<=10}">床前明月光</p>-->
    <p :class="xx">床前明月光</p>
    <!-- class类值控制语法: :class='{类值:判断条件(布尔值或者得到布尔值的算式),类值:判断条件....}'
        布尔值或者得到布尔值的算式: 里面直接可以使用数据属性
    -->

</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:11,
                xx:'c1',
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

总结:

1. 给元素绑定class类名。
    vue对象的data数据：
        data:{
          myObj:{
            complete:true,
            uncomplete:false,
          }
        }

        html元素：    
            <div class="box" :class="myObj">2222</div>
    最终浏览器效果：
            <div class="box complete">2222</div>

 

posted @ 2021-04-11 22:24  urls  阅读(120)  评论(0)  编辑  收藏  举报