简单了解vue 插值表达式Mustache

Z时代
2024-01-10
分类：IT

一、本节说明

用样例详细的说明插值表达式{{}}的使用，将模型数据插入到页面当中。

插值表达式为什么叫Mustache(英文:八字须)呢？看看{{内容}}的两个大括号像不像八字胡子呢！

二、怎么做


 <div id="app" style="background-color:aquamarine">
  <!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式-->
  <h2>{{firstName.length}}（使用‘.'获取属性）</h2>
  <h2>{{firstName + lastName}}（字符串拼接）</h2>
  <h2>{{firstName + ' ' + lastName}}（注意名字中间的的空格）</h2>
  <h2>{{firstName}} {{lastName}}（注意名字中间的空格）</h2>
  <h2>{{age * 2}}（简单的算术表达式）</h2>
  <h2>{{lastName == 'Curry' ? '真棒' : '还好'}}（三目运算）</h2>
  <h2>{{lastName.split('rr').reverse().join(',')}}（使用javascript函数）</h2>
  <h2>{{customMethod(lastName)}}(使用自定义的函数)</h2>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
 <script>
  const app = new Vue({
   el: '#app',
   data: {
    firstName: 'Stephen',
    lastName: 'Curry',
    age: 13
   },
   methods:{
    customMethod(str){
     return str.split('rr').reverse().join(',')
    }
   }
  })
 </script>