老师麻烦看一下代码，我的边框在点击后会附加一层黑色边框请问是为什么？然后请问老师代码其他还有可以优化的地方吗？
来源：3-12 自由编程
听说吃黄瓜减肥
2021-03-03 17:17:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小按钮</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button :style = '[bgColor,borderStyle,fontSize,styleObj]'
@click="handleBtnClick">变色</button>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
bgColor:{
backgroundColor:"purple"
},
borderStyle:{
border:"none"
},
fontSize:{
fontSize:"20px"
},
styleObj:{
color:"white"
}
},
methods: {
handleBtnClick:function(){
this.bgColor.backgroundColor = this.bgColor.backgroundColor === "purple" ? "pink" : "purple";
this.borderStyle.border = this.borderStyle.border === "none" ? "2px solid yellow" : "none";
this.fontSize.fontSize = this.fontSize.fontSize === "20px" ? "30px" : "20px";
this.styleObj.color = this.styleObj.color === "white" ? "black" : "white";
}
}
})
</script>
</body>
</html>
1回答
-
同学你好，是按钮获取焦点之后，默认的边框颜色。当失去焦点之后，就没有了。可以在css样式中清除一下，这样点击按钮就不会有了。如下：
祝学习愉快~
0
相似问题
回答 4
回答 2