zoukankan html css js c++ java

vue基础篇---class样式绑定

因为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>

查看全文

相关阅读:
HDU 1166 敌兵布阵我的第一棵树，线段树，树状数组。
HDU 2544 最短路第一个图论问题。
位运算简介及实用技巧（三）：进阶篇(2)
用匈牙利算法求二分图的最大匹配
 求两个字符串的最长公共子序列的长度（动态规划）
搜索之深度优先【迷宫搜索】（判断是否n步恰好可以到达某点）
HDU 2955 Robberies
STL简介
 HDU 1257 最少拦截系统
 HDU 2034 人见人爱AB

原文地址：https://www.cnblogs.com/coder-lzh/p/9250494.html