三元运算符，你看懂的了吗？（a ? b ? c ? ‘a‘ : ‘b‘ : ‘c‘ : ‘d‘)

本文链接：https://blog.youkuaiyun.com/gebieren/article/details/107110887

在很多时候，三元运算符对于简单的逻辑特别适用，不过偶然你看到 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>