Vue的class与style绑定的简单示例。_vue中的class和style案例-CSDN博客

本文链接：https://blog.csdn.net/LuckXinXin/article/details/104705232

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>class与style绑定</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <style>
    .classA {
      color: pink;
    }
    .classB {
      background: skyblue;
    }
    .classC {
      font-size: 20px;
    }

  </style>
</head>
<body>
<div id="demo">
	
  <h2>1. class绑定: :class=''</h2>
  <p class="classC" :class="myClass">喜欢，可以关注点赞</p> 
  
  <p :class="{classA: hasA, classB: hasB}"> 谢谢</p> 
  
  
  <p :class="['classA', 'classB']">期待你的点赞和关注</p>



  <h2>2. style绑定</h2>
  
  <p :style="{color: activeColor, fontSize: fontSize + 'px'}">期待您的关注哦</p>


  <hr>
  
  
  <button @click="update">点击查看变化</button>
</div>

<script type="text/javascript">
  const vm = new Vue({
    data () {
      return {
        myClass: 'classA',
        hasA: false,
        hasB: true,
        activeColor: 'green',
        fontSize: 20
      }
    },

    methods: {
      update () {
        this.myClass = 'classB'
        this.hasA = !this.hasA
        this.hasB = !this.hasB
        this.activeColor = 'orange'
        this.fontSize = 60
      }
    }
  })
  vm.$mount('#demo')
</script>
</body>
</html>