简单了解vue 插值表达式Mustache


Posted in Javascript onJuly 22, 2020

一、本节说明

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

三、效果

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

简单了解vue 插值表达式Mustache

四、深入

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

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

以上就是简单了解vue 插值表达式Mustache的详细内容,更多关于vue 插值表达式Mustache的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JS event使用方法详解
Apr 28 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
Apr 22 Javascript
详解node.js 事件循环
Jul 22 #Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
详解vue中v-on事件监听指令的基本用法
Jul 22 #Javascript
使用vue实现通过变量动态拼接url
Jul 22 #Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 #Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 #Javascript
vue props 一次传多个值实例
Jul 22 #Javascript
You might like
php自定义hash函数实例
2015/05/05 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
AngularJS基础 ng-switch 指令简单示例
2016/08/03 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
给Python入门者的一些编程建议
2015/06/15 Python
深入理解Python3中的http.client模块
2017/03/29 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
对Python信号处理模块signal详解
2019/01/09 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
介绍一下linux的文件系统
2015/10/06 面试题
营业经理岗位职责
2013/11/10 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
寒假家长评语大全
2014/04/16 职场文书
社会工作专业求职信
2014/07/15 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python