简单了解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 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
JQuery获取浏览器窗口内容部分高度的代码
Feb 24 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
node.js 中国天气预报 简单实现
Jun 06 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
微信小程序template模版的使用方法
Apr 13 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP扩展迁移为PHP7扩展兼容性问题记录
2016/02/15 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
php表单处理操作
2017/11/16 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
深入解析Vue 组件命名那些事
2017/07/18 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
微信小程序 网络通信实现详解
2019/07/23 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
什么是Web Service?
2012/07/25 面试题
2014年应届大学生自我评价
2014/01/09 职场文书
大学生新学期计划书
2014/04/28 职场文书
集体生日活动方案
2014/08/18 职场文书
护士年终个人总结
2015/02/13 职场文书
推荐信范文大全
2015/03/27 职场文书
如何在Python项目中引入日志
2021/05/31 Python