vue动态绑定class和style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.7/dist/vue.js"></script>
<style type="text/css">
.active{
border-bottom: 2px solid red;
}
.danger{
background-color: chartreuse;
}
</style>
</head>
<body>
<div id="app">
<!-- <b>动态绑定class类名</b>
<b>对象的方式 当值为true时 键当做类名绑定 为false 不绑定</b>
<div v-bind:class="{'active':isActive,'danger':hasError}">wwawawawaw</div>
<i>数组的方式 数组的每一项都会当做类名渲染</i>
<p :class="['aa','bb']">这三个类名一样</p>
<p class="aa bb">这三个类名一样</p>
<p :class="'aa bb'">这三个类名一样</p>
<p :class="[active,errorclass]">这是个p标签</p> -->
<b>动态绑定style</b>
<i>对象的方式 键当做样式的属性 值当做样式的值</i>
<p :style="{color:color,fontSize:fontSize}">一段话</p>
<i>数组的方式 每个数组项都可以是一个样式的对象 然后把数组中的每个对象合并成一个style</i>
<p :style="[baseStyle,styles]">也是亿欧短话</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
isActive:true,
hasError:true,
active:"active",
errorclass:"danger",
color:"red",
fontSize:"20px",
baseStyle:{
magin:0,
padding:0
},
styles:{
color:"#f0f",
fontSize:"22px"
}
}
})
</script>
</body>
</html>
版权声明：本文为weixin_45719052原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。