style和class
数据的绑定
语法：
:属性名=js变量/js语法
:class=’js变量、字符串、js数组’
class：三目运算符、数组、对象{red: true}
:style=’js变量、字符串、js数组’
style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style 和 Classtitle>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font-20 {
font-size: 20px;
}
.be-bold {
font-weight: bold;
}
style>
head>
<body>
<div id="box">
<p>我是一个普通的p标签p>
<div :class="class_obj">
<p>我是一个不普通的p标签1p>
div>
<button @click="handleClick">点击放大字体button>
<div :style="style_obj">
<p>我是一个不普通的p标签2p>
div>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
// class_obj: 'red', // 放1个是字符串
class_obj: ['red', 'font-20', 'be-bold'], // 放2个是数组
// class_obj: { red:true, be-bold:false}, // 也可以放对象
// 数组.push() 从尾部添加1个元素
// 数组.pop() 删除最后1个元素 并返回
// 对象的写法
style_obj: {
color: 'red',
fontSize: '20px'
}
// style_obj: [{background:'red'}, {fontSize:'20px'}]
},
methods: {
handleClick(){
this.style_obj['fontSize']='30px'
}
}
})
script>
html>
下方试验的命令
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.pop()
vm.class_obj.push('be-bold')
vm.class_obj.push('red')
vm.class_obj.push('font-20')
