zoukankan      html  css  js  c++  java
  • vue 绑定样式的几种方式

    vue 绑定样式  ( 中文API:https://www.runoob.com/vue2/vue-class-style.html)

    对象语法

    1.v-bind:class设置一个对象,动态切换class

    <div :class="{'active':isActive}">xxx</div>
    样式是否起作用,根据isActive的布尔值是否为true

    2.:class可以和class共存

    <div class="static" :class="{'active':isActive,'error':isError}">xxx</div>
    当isActive值为true,isError为false,样式为 static和isActive。
    当isActive值为false,isError为true,样式为 static和isError。
    当isActive值为true,isError为true ,样式为 static和isActive、isError

    3. :class可以绑定数据中的对象

    <div class="static" :class="classobj">xxx</div>
    export default {
      data(){
        return{
          classobj:{               //可以直接绑定一个对象,对象里面有多个样式
            active:true,
            error:false
          }
        }
      }
    }

     

    数组语法

    4.v-bind:class设置一个数组 

    使用了数组就要在data中指定重命名

    <div class="static" :class="[activeCls,errorCls]">xxx</div>
    export default {
      data(){
        return{
          activeCls:'active',      //相当于样式active样式在div中重命名 为activeCls
          errorCls:'error'
        }
      }
    }
    <style>
        .active{xxx}
        .error{xxx}
    </style>

    5.三元表达式

    <template>
      <div id="app">
        <div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
      </div>
    </template>
    <script>
    export default {
      data(){
        return{
          isActive:true,
          activeCls:'active',           //当isActive值为true时,会执行activeCls对应的样式 active 并且执行baseClass对应的样式 baseclass
          errorCls:'error',             //当isActive值为false时,会执行errorCls对应的样式 error 并且执行baseClass对应的样式 baseclass
          baseClass:'baseclass'
        }
      }
    }
    </script>
    <style scoped>
    .active{
      background: red;
    }
    .error{
      color: white;
    }
    .baseclass{
      text-align: center;
    }
    </style>

    三元表达式

    <div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">

    6.数组语法中使用对象语法

    <template>
      <div id="app">
        <div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
      </div>
    </template>
    <script>
    export default {
      data(){
        return{
          isActive:true,                   //因为isActive值为true,样式为active 和 baseClass对应的 baseclass 所以样式为 active、baseclass
          activeCls:'active',
          baseClass:'baseclass'
        }
      }
    }
    </script>
    <style scoped>
    .active{
      background: red;
    }
    .baseclass{
      text-align: center;
    }
    </style>

    7.定义一个数组通过不同索引值获取不同样式

    <div class="icon" :class="classMap[support.type]"></div>
        created () {
          this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
        },
        根据support.type的数组变化,索引到classMap对应的样式

    绑定内联样式

    <div id="app">
        <div :style="{color:cl,background:bk}">你好吗?</div></div>
    <script>
        new Vue({
            el:'#app',
            data:{
                cl:'red',
                bk:'yellow'
            }
        })
    </script>

    直接绑定到一个样式对象,让模板更清晰:

    <div id="app">
            <div :style="testObj">你好吗?</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                testObj:{
                    color:red;
                    background:yellow;
                }
            }
        })
    </script>
  • 相关阅读:
    Web 3D是否需要WebAssembly?
    # Python设计模式 单例模式
    学写PEP,参与Python语言的设计
    Github仓库如何选择开源许可证
    程序猿的产品思考:2C与2B产品思维的区别
    vue-如何实现带参数跳转页面
    基于Redis在定时任务里判断其他定时任务是否已经正常执行完的方案
    IDEA创建SpringBoot的多模块项目教程
    如何优雅地使用Mybatis逆向工程生成类
    Activiti工作流框架学习笔记(二)之springboot2.0整合工作流Activiti6.0
  • 原文地址:https://www.cnblogs.com/Fooo/p/12521974.html
Copyright © 2011-2022 走看看