DDR爱好者之家

简单了解vue 插值表达式Mustache
站长资源 2024/12/26 佚名
52 1538
DDR爱好者之家 Design By 杰米

一、本节说明

用样例详细的说明插值表达式{{}}的使用，将模型数据插入到页面当中。
插值表达式为什么叫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' "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>

三、效果

下图左侧为代码，右侧为浏览器展示效果截图，对比学习:

简单了解vue 插值表达式Mustache

四、深入

由上面的例子可以看出：插值表达式支持与其他的文字联合使用，也支持三目运算和算术运算，还可以使用javascript函数和自定义函数。

  • lastName.split('rr').reverse().join(',')的作用是将lastName字符串‘Curry'用‘rr'分割为数组['Cu','y'],然后数组倒序，并用逗号为分隔符号合并(join)字符串数组。
  • Vue对象中的methods代码段是专门用于定义自定义函数的，我们自定义了函数customMethod，并在插值表达式中使用了它。事件监听的自定义函数，我们会在后面的章节详细介绍。

以上就是简单了解vue 插值表达式Mustache的详细内容，更多关于vue 插值表达式Mustache的资料请关注其它相关文章！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米