这里的三元运算符是什么意思（图1），
来源：3-12 自由编程
Ting111
2020-12-30 21:40:08
后面的三个等号是在判断变量名里的值是否是这个值所以用了三个等号是吗
为什么this.originalColor要写两遍（图二），
<!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>
<style>
.original-color{
height:50px;
width:100px;
background-color:pink;
border:2px solid yellow;
font-size:30px;
color:black;
}
.change-color{
height:50px;
width:100px;
background-color:purple;
border:none;
font-size:20px;
color:white;
}
</style>
</head>
<body>
<div id="app">
<button @click='change' id='btn' :class="[originalColor,changeColor]">
提交
</button>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
originalColor:'',
changeColor:'change-color'
},
methods:{
change:function(){
this.originalColor=this.originalColor==='original-color'?'':'original-color';
this.changeColor=this.changeColor==='change-color'?'':'change-color';
}
}
})
</script>
</body>
</html>
1回答
-
同学你好，对于你的问题解答如下：
1、this.originalColor === 'original-color' ? '' : 'original-color';三元运算符的意思就是：如果this.originalColor 等于'original-color'，返回值为空，如果this.originalColor 不等于'original-color'，返回值为'original-color';
this.originalColor = this.originalColor === 'original-color' ? '' : 'original-color'; 这句代码的意思就是将三目运算后的返回值赋值给this.originalColor
2、是的，三个等号是在判断变量名里的值是否是这个值所以用了三个等号
3、由第一条分析可知，因为三目运算符的作用只是根据判断的结果，返回对应的值，并不会改变this.originalColor的值，所以需要将三目运算符运算的结果赋值给this.originalColor才会改变它的值。
一个等号表示赋值操作，等号左边的this.originalColor是被赋值的，等号右边的this.originalColor是用于三目运算的，如下图所示：
4、this.changeColor = this.changeColor === 'change-color' ? '' : 'change-color'; 这句代码与this.originalColor = this.originalColor === 'original-color' ? '' : 'original-color';是同样的思路
祝学习愉快~
0
相似问题