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]'也可以
  • 相关阅读:
    关于prototype学习
    java io 从文件的读取和输入
    java 匿名内部类
    动手做个 AI 机器人,帮我回消息!
    几个高效做事的法则,让你的一天有 25 小时
    爆肝一个月,我做了个免费的面试刷题网
    Log4j 被曝核弹级漏洞,开发者炸锅了!
    几个超火的编程网站,别错过!
    Java 处理表格,真的很爽!
    c++智能指针转化:static_pointer_cast、dynamic_pointer_cast、const_pointer_cast、reinterpret_pointer_cast
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9617437.html
Copyright © 2011-2022 走看看