您的位置：首页 > Web前端 > Vue.js

【Vue】class & style：Vue中的两种样式处理方法

2020-08-27 13:38 627 查看

class属性

1、基本的class使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red {
color: red;
}
.big {
font-weight: 50px;
}
</style>
</head>
<body>
<div id="app">
<h1 class="red big">vue中的样式处理</h1>
</div>
</body>
</html>

2、Vue中class的使用

绑定数组

通过 v-bind 绑定数组， v-bind 可简写为 “：”。

<div id="app">
<h1 v-bind:class="['red','big']">vue中的样式处理</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
})
</script>

三目运算

在绑定的数组中我们可以通过三目运算来实现简单的逻辑。

<div id="app">
<h1 v-bind:class="['red',flag?'big':'']">vue中的样式处理</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:true
}
})
</script>

数组中使用对象

上面例子中的三目运算符我们可以替换为对象，效果是一样的。

<div id="app">
<h1 v-bind:class="['red',{'big':flag}]">vue中的样式处理</h1>
</div>

绑定对象

上面的例子都是将数据和view写在一起了，我们也可以直接将数据以对象的形式写在vm中。

<div id="app">
<h1 v-bind:class="obj">vue中的样式处理</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
obj:{red:true, big:true}
}
})
</script>

style属性

1、单个style引用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 :style="obj">这是一个h1</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
obj: { color: 'red', fontSize: '50px' }
},
});
</script>
</body>
</html>

2、多个style引用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1 :style="obj1">这是一个h1</h1>
<h2 :style="[ obj1, obj2 ]">这是一个h2</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
obj1: { color: 'red', fontSize: '50px' },
obj2: { fontStyle: 'italic' }
},
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航