<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.min.js"></script>
<style>
.border{
border: 5px solid navajowhite;
}
.box{box-shadow: 0 0 10px red;}
.back{
background-color: red;
}
#div,#div2{width: 100px;height: 100px;}
</style>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="showBorder" id="">显示边框
<input type="checkbox" v-model="showBack" id="">显示背景颜色
<input type="checkbox" v-model="showBox" >显示阴影
<div id="div" :class="{border:showBorder,back:showBack,box:showBox}"></div>
<div id="div" :class="[showBorderclass,showBackclass,showBoxclass]"></div>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
showBorderclass:"border",
showBackclass:"back",
showBoxclass:"box",
showBorder:true,
showBack:true,
showBox:true
}
});
</script>
</body>
</html>
Vue绑定类样式
最新推荐文章于 2024-01-22 09:29:29 发布