zoukankan      html  css  js  c++  java
  • vuejs样式绑定

    第一种:class的对象绑定,class引用的是一个对象,这个对象的属性显示不显示由变量决定
    <style>
      .activated{
        color:red;
      }
    </style>
    <div id='app'>
      <div @click = 'handleClick' :class='{activated: isActivated}'>
        hello world
      </div>
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          isActivated:false
        },
        methods:{
          handleClick:function(){
            this.isActivated = !this.isActivated
          }
        }
      })
    </script>
    class是activated,而activated的显示不显示是由isActivated控制,isActivated为false,activated这个class不显示,isActivated为true,activated就显示
    第二种:和数组绑定,这个数组里面绑定的是一个变量
    <style>
      .activated{
        color:red;
      }
    </style>
    <div id='app'>
      <div @click = 'handleClick' :class='[activated]'>
        hello world
      </div>
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          activated:''
        },
        methods:{
          handleClick:function(){
            this.activated = (this.activated === 'activated' ? '' : 'activated');
          }
        }
      })
    </script>

    和数组绑定,这个数组里面绑定的是一个变量,这个变量的值就是className,这个className的值由activated这个变量控制



    第三种:通过样式style控制样式
    <div id='app'>
      <div @click = 'handleClick' :style='styleObj'>
        hello world
      </div>
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          styleObj:{
            color:'black'
          }
        },
        methods:{
          handleClick:function(){
            this.styleObj.color = (this.styleObj.color === 'red' ? 'black' : 'red');
          }
        }
      })
    </script>
    style里面是个样式的对象,这个对象可以是变量,也可以直接写,看要不要控制他
    style里面也可以是数组,:style='[styleObj]'也可以
  • 相关阅读:
    hdu 4465 概率称号
    Log4j配置文件位置+Spring数据源配置文件位置
    Centos 6.5下一个SNMP简单配置(snmp protocol v3,监控宝)
    过程 线 多线程 并发 同步异步
    django简单图表
    十年
    一起写2048(160行python代码)
    leetcode
    匹配算法重载方法
    串行卧重建10:小设计,而不是大布局
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9617437.html
Copyright © 2011-2022 走看看