class 和 style 绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定css样式</title>
<style>
.basic{
width: 400px;
height: 100px;
border: 1px solid black;
}
.happy{
border: 5px solid aquamarine;;
background: pink;
}
.sad{
border: 5px solid black;;
background: black;
}
</style>
<!--引入Vue-->
<script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="test01">
<!--字符串法，适用于：样式类名不确定，需要动态指定-->
<!--注意，class="basic" class="mood" 第二个class不能少:绑定，不然class只会生效一个，不能合并-->
<h1 class="basic" :class="mood">你好{{name}}</h1>
<!--数组法，适用于：样式个数不确定，名字也不确定需要动态指定-->
<h1 class="basic" :class="classArr">你好{{name}}</h1>
<!--对象法，适用于：样式个数确定，名字也确定，但要动态决定用不用-->
<h1 class="basic" :class="classObj">你好{{name}}</h1>
</div>
<!--设置不提示-->
<script type="text/javascript" >
Vue.config.productionTip = false;
const vm = new Vue({
data:{
name:'张三',
mood: 'happy',
classArr:['happy','sad'],
classObj:{
'happy':true,
'sad':true
}
}
})
vm.$mount('#test01')
</script>
</body>
</html>
查看11道真题和解析
投递上海银行等公司10个岗位 >