vue 三元运算讲解
原创
vue 三元运算讲解
原创
侠客冷展堂
修改于 2022-01-07 08:48:08
修改于 2022-01-07 08:48:08
代码可运行
运行总次数：0
代码可运行
(一)一个变量有两个值的情况下运算
如果第一个条件为真，则引用第一个值classA；否则引用第二个值classB；通过切换显示不同的样式
<p :class="isActive?'classA':'classB'">我是三目运算</p>
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<button v-on:click="switchClass">切换样式</button>
<p :class="isActive?'classA':'classB'">我是三目运算</p>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
isActive: true,
},
methods: {
switchClass: function () {
if (this.isActive) {
this.isActive = false;
} else {
this.isActive = true;
}
},
},
});
</script>
<style>
.classA {
font-size: 24px;
color: black;
}
.classB {
font-size: 24px;
color: red;
}
</style>
</body>(二)一个变量有三个值及以上的情况下运算
<p :class="num==1?'class1':num==2?'class2':num==3?'class3':num==4?'class4':'class5'">我是三目运算</p>
如果num==1，则显示class1；如果num==2，则显示class2；如果num==3，则显示class3；依次类推.....
<!DOCTYPE html>
<head>
<title>test</title>
<script
type="text/javascript"
src="../../node_modules/vue/dist/vue.js"
></script>
</head>
<body>
<div id="app">
<button v-on:click="switchClass">切换样式</button>
<p :class="num==1?'class1':num==2?'class2':num==3?'class3':num==4?'class4':'class5'">我是三目运算</p>
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
num: 1,
},
methods: {
switchClass: function () {
this.num = this.num + 1;
console.log(this.num);
},
},
});
</script>
<style>
.class1 {
font-size: 48px;
color: black;
}
.class2 {
font-size: 48px;
color: red;
}
.class3 {
font-size: 48px;
color: green;
}
.class4 {
font-size: 48px;
color: rosybrown;
}
.class5 {
font-size: 48px;
color: greenyellow;
}
.class6 {
font-size: 48px;
color: blue;
}
</style>
</body>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
Vue学习笔记-day01
更多 >
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
