脚本宝典收集整理的这篇文章主要介绍了

vue中class和style设置的相关方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

class&style样式设置

class

html代码

<div id="box">
    <strong>阿斯顿发</strong>
</div>

css代码

.red {
    color: red;
}
.gray {
    background-color: gray;
}

js代码

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}

样式生效的写法

  1. :class="[red, gray]" 调用的是vue参数里的data属性

    <strong :class="[red, gray]"></strong>       
  2. :class="{red: true, gray: true}"

    <strong :class="{red: true, gray: true}"></strong> 

    第二种方法也是可以调用vue参数了的data属性的,记住,Vue里面一切皆是数据

    new Vue({
        el: '#box',
        data: {
           red: 'red',
           gray: 'gray',
           a: true,
           b: false
     }   
    });
    <strong :class="{red: a, gray: b}"></strong>
  3. :class="json",第二种方法的精简版,官方版本

    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray',
            json: {
                a: true,
                b: false
            }
        }
    });
<strong :class="json"></strong>

style

和class基本相同

  1. :style="{}"

<strong :style="{color: 'red', backgroundColor: 'gray'}"></strong>
  1. :style="a"

    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray',
            a: {
                color: 'red',
                backgroundColor: 'gray' //注意复合样式的书写规范
            }
        }
    });
    <strong :style="a">阿斯顿发</strong>
  2. :style="[a, b]", a, b对应的是data里的两个json数据

总结

以上是脚本宝典为你收集整理的

vue中class和style设置的相关方法

全部内容,希望文章能够帮你解决

vue中class和style设置的相关方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过