vue基礎篇---class樣式綁定

本文轉載自查看原文 2018-07-01 16:38 1640 vue

因為class的綁定在實際的工作中會經常用到。所以特意記錄一下，有好幾種方法。

對象綁定方法，另外一個值來控制顯示隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="vue_det">
  <!--active是上面定義好的類名，flag是你設置的布爾變量-->
  <h1 :class="{active:flag}" @click="details">site : {{site}}</h1>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "菜鳥教程",
      flag:false
    },
    methods: {
      details: function() {
        this.flag=!this.flag;  //點擊來控制字體顏色切換
      }
    }
  })
</script>
</body>
</html>

數組的方法，數組里面的變量就是class的類名（同理數組里面可以放多個類名）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="vue_det">
  <!--active是上面定義好的類名-->
  <h1 :class="[active]" @click="details">site : {{site}}</h1>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "菜鳥教程",
      active:''
    },
    methods: {
      details: function() {
        this.active=this.active==="active"?"":"active"; //點擊來控制字體顏色切換
      }
    }
  })
</script>
</body>
</html>

style綁定對象的方式，后面綁定的對象的值就是style的樣式屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <style>
    .active{
      color: red;
      font-size: 30px;
    }
  </style>
</head>
<body>
<div id="vue_det">
  <!--active是上面定義好的類名-->
  <sapn :style="obj" @click="details">site : {{site}}</sapn>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "菜鳥教程",
      obj:{
        color:'red',
        fontSize : '30px'
      }
    },
    methods: {
      details: function() {
        this.obj.color='green'; //點擊來控制字體顏色切換
      }
    }
  })
</script>
</body>
</html>

style綁定數組的方式，后面的數組的值可以有多個

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
  <!--active是上面定義好的類名-->
  <sapn :style="[obj,obj2]" @click="details">site : {{site}}</sapn>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_det',
    data: {
      site: "菜鳥教程",
      obj:{
        color:'red'
      },
      obj2:{
        fontSize : '30px'
      }
    },
    methods: {
      details: function() {
        this.obj.color='green'; //點擊來控制字體顏色切換
      }
    }
  })
</script>
</body>
</html>

免責聲明！

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

猜您在找 web前端——Vue.js基礎學習之class與樣式綁定 Vue的一些樣式（class/style）綁定 vue--class和style樣式綁定 vue.js基礎知識篇(4):過濾器、class與style的綁定2 vue 基礎綁定樣式雙向綁定標簽屬性綁定循環 vue通過屬性綁定為元素設置class樣式 Vue基礎篇--7表單輸入綁定input Vue.js04：vue樣式-通過屬性綁定方式為元素設置class類樣式 vue基礎-動態樣式&表單綁定&vue響應式原理 Vue.js學習筆記第二篇樣式綁定