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

hearaway 发布于2019-08-30 13:14 / 2464人阅读

摘要：样式设置代码阿斯顿发代码代码样式生效的写法调用的是参数里的属性第二种方法也是可以调用参数了的属性的记住，里面一切皆是数据第二种方法的精简版，官方版本和基本相同注意复合样式的书写规范阿斯顿发对应的是里的两个数据

class&style样式设置 class

html代码


    阿斯顿发

css代码

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

js代码

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

样式生效的写法

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

:class="{red: true, gray: true}"

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

new Vue({
    el: "#box",
    data: {
       red: "red",
       gray: "gray",
       a: true,
       b: false
 }   
});

:class="json",第二种方法的精简版，官方版本

new Vue({
    el: "#box",
    data: {
        red: "red",
        gray: "gray",
        json: {
            a: true,
            b: false
        }
    }
});

style

和class基本相同

:style="{}"

:style="a"

new Vue({
    el: "#box",
    data: {
        red: "red",
        gray: "gray",
        a: {
            color: "red",
            backgroundColor: "gray" //注意复合样式的书写规范
        }
    }
});

阿斯顿发

:style="[a, b]", a, b对应的是data里的两个json数据

云服务器 GPU云服务器阿里云服务器的相关设置 JS中style属性 js中改变style java中class类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115407.html

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

摘要：样式设置代码阿斯顿发代码代码样式生效的写法调用的是参数里的属性第二种方法也是可以调用参数了的属性的记住，里面一切皆是数据第二种方法的精简版，官方版本和基本相同注意复合样式的书写规范阿斯顿发对应的是里的两个数据 class&style样式设置 class html代码阿斯顿发 css代码 .red { color: red; } .gray { backgr...

huaixiaoz 2019-08-21 11:16 评论0 收藏0
vue中class和style设置的相关方法

摘要：样式设置代码阿斯顿发代码代码样式生效的写法调用的是参数里的属性第二种方法也是可以调用参数了的属性的记住，里面一切皆是数据第二种方法的精简版，官方版本和基本相同注意复合样式的书写规范阿斯顿发对应的是里的两个数据 class&style样式设置 class html代码阿斯顿发 css代码 .red { color: red; } .gray { backgr...

Paul_King 2019-08-01 16:06 评论0 收藏0
react搭建后台管理（react初窥）

摘要：前言以前一直是用进行的开发于是决定年后弄一弄所以年后这段时间也就一直瞎弄可算是看到成果了本来是想写一个类似仿今日头条那样的项目来入手后来又寻思还不如写个后台管理呢。于是乎自己便着手简单的搭建了一个集中设置的版本。前言以前一直是用vue进行的开发, 于是决定年后弄一弄react, 所以年后这段时间也就一直瞎弄react, 可算是看到成果了本来是想写一个类似 Vue仿今日头条那样...

wangjuntytl 2019-08-22 15:23 评论0 收藏0
Vue.js-计算属性和class与style绑定

摘要：每一个计算属性都包含一个和一个。使用计算属性的原因在于它的依赖缓存。及与绑定的主要用法是动态更新元素上的属性。测试文字当的表达式过长或逻辑复杂时，还可以绑定一个计算属性。学习笔记：前端开发文档计算属性所有的计算属性都以函数的形式写在Vue实例中的computed选项内，最终返回计算后的结果。计算属性的用法在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终...

Shihira 2019-08-23 16:02 评论0 收藏0
从0到1搭建webpack2+vue2自定义模板详细教程

摘要：安装安装完成之后，你应该可以使用了，方式如下上述命令应该自动在浏览器中打开。前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用官方的webpack模板居多，不过对于很多人来说，官方的webpack模板的配...

cartoon 2019-08-20 16:38 评论0 收藏0