<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue框架学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
<style type="text/css">
.class1{
font-size: 20px;
}
.class2{
background: yellow;
}
</style>
</head>
<body>
<div id="div1">
<!--使用变量，三目表达式通过操纵变量来动态绑定class-->
<p class="default" v-bind:class="isShow?'class1':'class2'">三目表达式_使用class1或class2</p>
<!--v-bind:class="{class1,class2:isShow}"不能这样同时绑定多个class，要分开-->
<!--对象方式绑定-->
<p class="default" v-bind:class="{class1:isShow,class2:isShow}">对象方式绑定_使用class1和class2</p>
<!--数组方式绑定多个class-->
<p class="default" v-bind:class="[whichClass,'class2']">数组方式绑定_使用class1和class2</p>
<button v-on:click="button">按钮改变isShow的值</button>
<hr />
<p v-bind:style="{background:color}">style样式</p>
<p v-bind:style="obj1">style样式_对象语法</p>
<p v-bind:style="[obj1,obj2]">style样式_数组语法</p>
</div>
<script>
var vm=new Vue({
el:"#div1",//绑定id对象
data:{//定义属性对象
isShow:false,
whichClass:"class1",
color:"green",
obj1:{background:"gray",fontSize:"20px"},//font-size改成fontSize
obj2:{color:"blue"}
},
methods:{//定义函数，可传参
button:function(){
this.isShow=!this.isShow;
}
},
});
</script>
</body>
</html>
Vue框架_class和style的绑定
猜你喜欢
转载自blog.csdn.net/CWH0908/article/details/86353448
今日推荐
周排行