首页 > web前端 > css教程 > 正文

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

高洛峰
发布: 2017-02-18 14:50:06
原创
1504 人浏览过

class&style样式设置

class

html代码

<p id="box">
    <strong>阿斯顿发</strong>
</p>
登录后复制

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: &#39;red&#39;, backgroundColor: &#39;gray&#39;}"></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设置的相关方法 相关文章请关注PHP中文网!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!