请老师检查一下谢谢。
来源：3-12 自由编程
幻城163630
2020-07-23 16:04:07
<!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="./js/vue.js"></script>
<style>
.defaul{
background-color: purple;
border:none;
font-size:20px;
color:white;
}
.activat{
background-color: pink;
border:2px solid yellow;
font-size:30px;
color:black;
}
</style>
</head>
<body>
<div class="app">
<button v-bind:class="[activate,defaul]"
v-on:click="handleClick">一个按钮</button>
</div>
<script>
var app=new Vue({
el:".app",
data:{
defaul:"defaul",
activate:"",
},
methods:{
handleClick:function(){
if(this.defaul!==""){
this.defaul="";
this.activate="activat";
}else{
this.defaul="defaul";
this.activate="";
}
}
},
});
</script>
</body>
</html>
1回答
-
同学你好，代码实现效果没有问题，很棒。继续加油，祝学习愉快！
0
相似问题