1、样式代码准备
样式提前准备
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad{
border: 4px dashed rgb(1, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.nobug1{
background-color: yellowgreen;
}
.nobug2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.nobug3{
border-radius: 5px;
}
</style>
2、绑定class样式
绑定class样式——字符串写法
适用于：样式的类名不确定，需要动态指定
html：
<!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">
{{label}}
</div>
js：
mood: 'normal',
methods:{
changeMood(){
const arr = ['normal', 'happy', 'sad'];
// Math.random()产生的数值介于 0,1之间，可以等于0，但是不会等于1；
let index = Math.floor(Math.random() * 3);
this.mood = arr[index];
}
}
效果：
绑定class样式——数组写法
适用于：要绑定的样式个数不确定，名字也不确定
html:
<div class="basic" :class="classArr">
{{label}}
</div>
js
classArr: ['nobug1', 'nobug2', 'nobug3'],
效果：
绑定class样式——对象写法
适用于：要绑定的样式个数确定，名字也确定，但需要动态决定用不用
html
<div class="basic" :class="classObj">
{{label}}
</div>
js
classObj: {
nobug1: false,
nobug2: true,
},
效果：
3、绑定style样式
绑定
style样式——对象写法
html
<!-- 绑定style样式——对象写法-->
<div class="basic" :style="styleObj">
{{label}}
</div>
js
styleObj:{
fontSize: '40px',
},
效果：
绑定
style样式——数组写法
html
<!-- 绑定style样式——数组写法-->
<div class="basic" :style="styleArr">
{{label}}
</div>
js
styleArr: [
{
fontSize: '40px',
},
{
color: 'red'
}
]
效果：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 4px solid red;
background-color: rgba(255, 255, 0, 0.644);
background: linear-gradient(30deg, yellow, pink, orange, yellow);
}
.sad{
border: 4px dashed rgb(1, 197, 2);
background-color: gray;
}
.normal{
background-color: skyblue;
}
.nobug1{
background-color: yellowgreen;
}
.nobug2{
font-size: 30px;
text-shadow: 2px 2px 10px red;
}
.nobug3{
border-radius: 5px;
}
</style>
</head>
<body>
<div id="root">
<!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定-->
<div class="basic" :class="mood" @click="changeMood">
{{label}}
</div>
<br/>
<br/>
<!-- 绑定class样式——数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
<div class="basic" :class="classArr">
{{label}}
</div>
<br/>
<br/>
<!-- 绑定class样式——对象写法，适用于：要绑定的样式个数确定，名字也确定，但需要动态决定用不用-->
<div class="basic" :class="classObj">
{{label}}
</div>
<br/>
<br/>
<!-- 绑定style样式——对象写法-->
<div class="basic" :style="styleObj">
{{label}}
</div>
<br/>
<br/>
<!-- 绑定style样式——数组写法-->
<div class="basic" :style="styleArr">
{{label}}
</div>
<br/>
<br/>
</div>
<script>
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
// el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
el: '#root',
data:{
label: '不写八个',
mood: 'normal',
classArr: ['nobug1', 'nobug2', 'nobug3'],
classObj: {
nobug1: false,
nobug2: true,
},
styleObj:{
fontSize: '40px',
},
styleArr: [
{
fontSize: '40px',
},
{
color: 'red'
}
]
},
methods:{
changeMood(){
const arr = ['normal', 'happy', 'sad'];
// Math.random()产生的数值介于 0,1之间，可以等于0，但是不会等于1；
let index = Math.floor(Math.random() * 3);
this.mood = arr[index];
}
}
})
</script>
</body>
</html>
完整实现效果文章来源：https://www.toymoban.com/news/detail-663399.html
文章来源地址https://www.toymoban.com/news/detail-663399.html
到了这里，关于Vue教程(五)：样式绑定——class和style的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
