Vue（3）- 使用 Mustache 模板显示数据

 1 <!--
 2     Mustache【双大括号】简单的用法
 3         (1)输出字符串：{{ 'abc' }}
 4         (2)输出js变量的值
 5         (3)单行js代码
 6             {{ 1+1 }}                                      显示结果 2
 7             {{ 1+'abc' }}                                  显示结果 1abc
 8             {{ 1 == 2 ? 'YES' : 'NO' }}                    显示结果 NO
 9             {{ 'abc'.split('').reverse().join('') }}       显示结果 cba
10 -->
11 <div id="app">
12     <p>{{ msg }}</p>
13     <p>{{ number + 1 }}</p>
14     <p>{{ flag ? 'YES' : 'NO' }}</p>
15     <p>{{ num == 1 ? 'YES' : 'NO' }}</p>
16     <p>{{ 1 == 2 ? 'YES' : 'NO' }}</p>
17     <p>{{ message.split('').reverse().join('') }}</p>
18 </div>
19 <script type="text/javascript">
20     var vm = new Vue({
21         el : "#app",
22         data : {
23             msg : "hi vue",
24             number : 10,
25             flag : true,
26             num : 1,
27             message : "123abc"
28         }
29     });
30 </script>