vue控制style样式

1. 控制标签style样式

格式1：值是json对象，对象写在元素的:style属性中
标签元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<div id="xx">
<!--    <div class="c1" :style="{color:c, backgroundColor:b}"> &lt;!&ndash; 注意:有-的css属性名称,要改为驼峰格式 &ndash;&gt;-->
    <div class="c1" :style="divstyle"> <!-- 注意:有-的css属性名称,要改为驼峰格式 -->
        床前明月光,地上鞋三双.

    </div>
</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                c:'red',
                b:'green',
                divstyle:{
                    'color':'tan',
                    'backgroundColor':'blue',

                }
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>
格式1：值是json对象，对象写在元素的:style属性中
     标签元素：
             <div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
                <!-- 注意：不能出现中横杠，有的话就套上'font-size'，或者去掉横杠，后一个单词的首字母大写，比如fontSize -->
     data数据如下：
         data: {
             activeColor: 'red',
             fontSize: 30
         }
格式2：值是对象变量名，对象在data中进行声明
   标签元素：
               <div v-bind:style="styleObject"></div>
   data数据如下：
         data: {
                styleObject: {
                     color: 'red',
                     fontSize: '13px'  
                          }
                 }

格式3：值是数组
  标签元素：
                <div v-bind:style="[style1, style2]"></div>
    data数据如下：
                data: {
                     style1:{
                       color:"red"
                     },
                     style2:{
                       background:"yellow",
                       fontSize: "21px"
                     }
                }

 

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