学习vue第五节，vue中使用class和style的css样式
2021-03-12 07:29
标签：数组 lis 绑定 css col htm cti rip span 数组中使用三元表达式 数组中嵌套对象 直接使用对象 直接在元素上通过 将样式对象，定义到 在data上定义样式： 在元素中，通过属性绑定的形式，将样式对象应用到元素中： 在 在data上定义样式： 在元素中，通过属性绑定的形式，将样式对象应用到元素中： 学习vue第五节，vue中使用class和style的css样式 标签：数组 lis 绑定 css col htm cti rip span 原文地址：https://www.cnblogs.com/shangrao/p/12828075.htmlvue中使用class样式
这是一个H1
这是一个H1
这是一个H1
这是一个H1
使用内联样式
:style 的形式，书写样式对象这是一个善良的H1
data 中，并直接引用到 :style 中
data: {
h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ }
}
这是一个善良的H1
:style 中通过数组，引用多个 data 上的样式对象
data: {
h1StyleObj: { color: ‘red‘, ‘font-size‘: ‘40px‘, ‘font-weight‘: ‘200‘ },
h1StyleObj2: { fontStyle: ‘italic‘ }
}
这是一个善良的H1
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>title>
script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8">script>
style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
style>
head>
body>
div id="app">
h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！h1>
h1 :style="[ styleObj1, styleObj2 ]">这是一个h1h1>
div>
script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: ‘#app‘,
data: {
flag: true,
classObj: {red: true,thin: true,italic: false,active: false},
styleObj1:{ color:"red"，"font-size":"28px"},
styleObj1:{ ‘font-weight‘: 200},//属性有横线的要加双引号
},
methods: {}
});
script>
文章标题：学习vue第五节，vue中使用class和style的css样式
文章链接：http://soscw.com/index.php/essay/63575.html