vue中绑定style样式的方式

vue中绑定样式的方式有多种下面就来看看吧开始之前先准备一些样式css样式<style>.red {color: red}.green {color: green}.big {font-size: 48px}.big_blue {background-

摩羯座**

15834人浏览 · 2021-12-31 11:28:36

摩羯座** · 2021-12-31 11:28:36 发布

vue中绑定样式的方式有多种下面就来看看吧
开始之前先准备一些样式
css样式

  <style>
        .red {
            color: red
        }

        .green {
            color: green
        }

        .big {
            font-size: 48px
        }

        .big_blue {
            background-color: blue;
        }
    </style>

1.直接绑定：calss='activeClass’

<body>
    <!-- 
    绑定class的方式
      1.直接绑定   ：calss='activeClass'
   -->
    <div id="app">
        <!-- 直接绑定 -->
        <p :class="activeClass" class="big">hanpy new Year</p> 
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
           data:{
            }
        })
    </script>

2.对象语法
:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名值为布尔值，true生效，false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性： aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。
推荐的用法：如果绑定的类名比较少，可以直接绑定对象，如果比较多，建议将对象写在data中，如果涉及到逻辑运算，可以用计算属性返回一个对象。

<div id="app">
        <!-- 对象语法 -->
        <p :class="{green:isGreen,big:isBig}">hanpy new Year</p> 
         <p :class="aa">hanpy new Year</p> 
        <p :class="bb">hanpy new Year</p> 
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isGreen:true,
                isBig:true,
                age: 20,
                aa: {
                    "red": true,
                    "big": false
                },
                myColor_blue: "bc_blue",
                myColor_red: "red",
                myColor_green: "green",
                mySize: "big"


            },
            methods: {

            },
            computed: {
                bb() {
                    return {
                        "green": this.age > 18,
                        "big": true
                    }
                }
            }
        })
    </script>

3.数组语法 :class=’[]'

 <div id="app">
        <!-- 数组语法 -->
        <!-- <p :class="[age>18?myColor_red:myColor_green,mySize]">hanpy new Year</p> -->
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                myColor_blue: "bc_blue",
                myColor_red: "red",
                myColor_green: "green",
                mySize: "big"
            },
            methods: {

            },
            computed: {
                bb() {
                    return {
                        "green": this.age > 18,
                        "big": true
                    }
                }
            }
        })
    </script>

4.数组+对象

<div id="app">
        <p :class="[aa,myColor_blue]">happy new Year</p>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                age: 20,
                aa: {
                    "red": true,
                    "big": false
                },
                myColor_blue: "bc_blue",
                myColor_red: "red",
                myColor_green: "green",
                mySize: "big"


            },
            methods: {

            },
            computed: {
                bb() {
                    return {
                        "green": this.age > 18,
                        "big": true
                    }
                }
            }
        })
    </script>

通过vue来控制样式 style
1.对象语法： :style={样式名:‘样式值’} 样式名如果有-，则改成驼峰式命名。
:style=“obj” 样式值可以是data中的一个变量。
代码

<div id="app">
    <p :style="{color:'red',backgroundColor:'skyblue'}">happy new year</p>
     <p :style="{color:activeColor, backgroundColor: 'skyblue'}">happy new year</p>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor:"green",
        aa: {
          color: 'red', backgroundColor: 'skyblue'
        },
        bb:{
          fontSize:"30px"
        }
      },
      computed:{
        myStyle(){
          return {
            color: 'green', backgroundColor: 'skyblue'
          }
        }
      }
    });
  </script>

2.计算属性返回一个样式对象。

 <div id="app">
    <p :style="myStyle">happy new year</p>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
      },
      computed:{
        myStyle(){
          return {
            color: 'green', backgroundColor: 'skyblue'
          }
        }
      }
    });
  </script>

3.数组语法可以将多个样式对象写在同一个数组中。

 <div id="app">
    <p :style="[aa,bb]">happy new year</p>
  </div>

  <script>
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        activeColor:"green",
        aa: {
          color: 'red', backgroundColor: 'skyblue'
        },
        bb:{
          fontSize:"30px"
        }
      },
      computed:{
      }
    });
  </script>