Vue 基础精讲(三)

Class 与 Style 绑定

绑定 HTML Class
绑定内联样式

绑定 HTML Class

对象语法
对div中的 class 进行绑定后， activated 这个 class 存在与否将取决于数据属性 isActivated 的 truthiness，给div设置一个点击事件，控制 class 属性的显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue中的样式绑定</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .activated {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click="handleDivClick" 
    :class="{activated: isActivated}"
    >hello world</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data: {
        isActivated: false
      },
      methods: {
        handleDivClick: function() {
          this.isActivated = !this.isActivated;
        }
      }
    })
  </script>
</body>
</html>

数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

 ...
<div id="app">
   <div @click="handleDivClick" 
   :class="[activated, activatedOne]"
   >hello world</div>
 </div>
 <script type="text/javascript">
   var vm = new Vue({
     el: "#app",
     data: {
       activated: "",
       activatedOne: "activated-one"
     },
     methods: {
       handleDivClick: function() {
         this.activated = this.activated === "activated" ? "" : "activated";
       }
     }
   })
 </script>
  ...

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式或短横线分隔 (记得用单引号括起来) 来命名，经常使用三元表达式会使代码显得更优雅哦

...
<div id="app">
  <!-- <div :style="styleObj"  --> // 对象语法
  <div :style="[styleObj, {fontSize: '20px'}]"  
  @click="handleDivClick">hello world</div>  // 数组语法
</div> 
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data: {
      styleObj: {
        color: "black"
      }
    },
    methods: {
      handleDivClick: function() {
        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
      }
    }
  })
</script>
 ...

Class 与 Style 绑定

绑定 HTML Class

绑定内联样式

猜你喜欢