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>

查看全文

相关阅读:
Oracle数据库测试和优化最佳实践： OTest介绍（转）
Oracle数据库中心双活之道：ASM vs VPLEX （转）
awrcrt更新到2.1（重大更新）
Oracle性能图表工具：awrcrt.sql 介绍，更新到了2.14 （2018年3月31日更新）
java虚拟机---内存
 如何进行高效的学习
 OpenGL绘制自由落体小球
 MDA系统分析实战--图书馆管理系统
 Python爬虫实战---抓取图书馆借阅信息
 Python--urllib3库详解1

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