Vue中的样式绑定

青旅半醒 2022-01-22 14:25 306阅读 0赞

# 1 第一种 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    <style type="text/css">
      .intro {color:blue;}
    </style>
    </head>
    <body>
    <div id ="app" :class="{intro: isActive}" @click = handleClick>
      hello world
    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data : {
            isActive: false
          },
          methods:{
            handleClick: function(){
              console.log(1)
              this.isActive = !this.isActive 
            }
           
          }
        })
    </script>
    </body>
    </html>

# 2 第二种 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    <style type="text/css">
      .intro {color:red;}
    </style>
    </head>
    <body>
    <div id ="app" :class="[intro]" @click = handleClick>
      hello world
    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data : {
            intro: ''
          },
          methods:{
            handleClick: function(){
              console.log(1)
              this.intro = this.intro === 'intro' ? '' : 'intro'
            }
           
          }
        })
    </script>
    </body>
    </html>

# 3 第三种 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue</title>
    <script src="./vue.js"></script>
    <style type="text/css">
      .intro {color:red;}
    </style>
    </head>
    <body>
    <div id ="app" :style="styleObj" @click = handleClick>
      hello world
    </div>
    <script>
        var app = new Vue({
          el: '#app',
          data : {
            styleObj: {
              color: "red"
            }
          },
          methods:{
            handleClick: function(){
              console.log(1)
              this.styleObj.color =  this.styleObj.color  === 'blue' ? 'red' :'blue'
            }
           
          }
        })
    </script>
    </body>
    </html>