vue控制style樣式

本文轉載自查看原文 2021-04-11 22:48 536 vue

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"
                     }
                }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js控制style樣式 Vue 設置style樣式 013——VUE中多種方式使用VUE控制style樣式屬性 vue 中使用style（樣式） vue 動態渲染 style 樣式 vue動態添加style樣式 js一次控制多個style樣式 Vue的一些樣式（class/style）綁定 vue中樣式的典型操作(:class,:style) vue--class和style樣式綁定