zoukankan      html  css  js  c++  java
  • class和style的绑定

    1class的绑定

    对象写法

    数组写法

    <div :class="[activeClass,currentIndex]">style</div>

    2.style的绑定

    对象写法

    <template>
    <div :class="classdemo">sdfsfs
    <div class="old" :class="{'text':actives,current:actives}">sdfsfs</div>
    <div :class="classobj">xxxx</div>
    <button type="button" @click="changecss">按钮</button>
    <div :class="[activeClass,currentIndex]">style</div>
    <div :class="[isActive?activeClass:'',currentIndex]">三目运算符</div>
    <!-- 对象只能接受字符串,数组可以接受对象或者字符串拼接-->
    <div :class="[isActive?activeClass:currentIndex1,currents,classdemo]">active1 current active</div>
    <p :style="{color:'red',fontSize:'20px',backgroundColor:'blue'}">对象</p>
    <p :style="{color:colors,fontSize:'20px',backgroundColor:'#f00'}">这是段落p</p>
    </div>
    </template>

    <script>
    export default {
    name: "style1",
    data() {
    return {
    classdemo: "active",
    actives: true,
    currents: "current",
    classobj: {
    "text1": true,
    "text2": true
    },
    activeClass: "active1",
    currentIndex: "currents",
    currentIndex1: "curr",
    isActive: true,
    colors:"yellow"
    }
    },
    methods: {
    changecss() {
    this.classobj = {
    "text1": true,
    "text2": false
    }
    }
    }
    }
    </script>
    <style scoped>
    .active1 {
    color: red;
    }
    .currents {
    color: blue;
    }
    </style>

  • 相关阅读:
    js调试工具
    学习之compare:c#和c++中各种compare方法
    individual program总结2.0
    individual program总结
    C语言编程—自动生成四则运算升级版
    jQuery Validate(一)
    Java_得到GET和POST请求URL和参数列表
    jQuery Validate(二)
    MySQL_使用时遇到的问题汇总
    jQuery Validate(三)
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11306059.html
Copyright © 2011-2022 走看看