在很多时候，三元运算符对于简单的逻辑特别适用，不过偶然你看到 a ? b ? c ? 'a' : 'b' : 'c' : 'd'是不是特别的懵逼，那里面具体是怎么运算的呢？拆分下来就一目了然Lee。
<style> .red { color: red; } .blue { color: blue; } .green{ color: green; } .font { font-size: 24px; } </style> </head> <body> <div id="app"> <span :class='num ? num1 ? "red" : "blue" : "green font"'>{{value}}</span><br> <span :class='num ? (num1 ? "red" : "blue" ): "green"'>{{value}}</span> </div> <script src="vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num: 0, num1: 1, value: '看我的颜色变化' }, methods: { }, }); </script> </body>其实就是从里往外进行解刨，不管多少层，都是一样的道理，只是把懒进行到底而已。 奉上偷懒的一些日常： && 巧用：
<div id="app"> <span :class=' num && "red font"'>{{value}}</span><br> <span :class=' num1 && "blue" '>{{value}}</span><br> </div> <script src="vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { num: 0, num1: 1, value: '看我的颜色变化' }, methods: { }, }); </script>