编程 Javascript

vue基础之模板和过滤器用法实例分析

Posted in Javascript onMarch 12, 2019

本文实例讲述了vue基础之模板和过滤器用法。分享给大家供大家参考，具体如下：

一、模板

{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue模板</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js" async></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          msg:'abc'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    {{*msg}}
    <br>
    {{{msg}}}
  </div>
</body>
</html>

vue基础之模板和过滤器用法实例分析

二、过滤器

过滤器:-> 过滤模板数据

系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase    eg: {{'welcome'| uppercase}}
lowercase
capitalize 首字母大写
currency 钱
{{msg| filterA 参数}}

{{'welcome'|uppercase}}    //WELCOME
{{'WELCOME'|lowercase}}   //welcome
{{'WELCOME'|lowercase|capitalize}}   //Welcome
{{12|currency}} //$12.00
{{12|currency '￥'}} //￥12.00

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

vue基础之模板和过滤器用法实例分析

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js类后台管理菜单类-MenuSwitch

Sep 12 Javascript

js 深拷贝函数

Dec 04 Javascript

上传文件返回的json数据会被提示下载问题解决方案

Dec 03 Javascript

javascript创建动态表单的方法

Jul 25 Javascript

Vue数据驱动模拟实现4

Jan 12 Javascript

如何使用JS在HTML中自定义字符串格式化

Jul 20 Javascript

JsChart组件使用详解

Mar 04 Javascript

JavaScript Math对象和调试程序的方法分析

May 13 Javascript

微信小程序非跳转式组件授权登录的方法示例

May 22 Javascript

使用vue中的混入mixin优化表单验证插件问题

Jul 02 Javascript

viewer.js实现图片预览功能

Jun 24 Javascript

vue实现列表拖拽排序的功能

Nov 02 Javascript

mpvue开发音频类小程序踩坑和建议详解

Mar 12 #Javascript

React中this丢失的四种解决方法

Mar 12 #Javascript

使用koa2创建web项目的方法步骤

Mar 12 #Javascript

如何为你的JS项目添加智能提示与类型检查详解

Mar 12 #Javascript

Vue项目引发的「过滤器」使用教程

Mar 12 #Javascript

通过JS运行机制的角度说说作用域

Mar 12 #Javascript

Jquery的autocomplete插件用法及参数讲解

Mar 12 #jQuery

You might like

杏林同学录(四)

2006/10/09 PHP

PHPMyAdmin 快速配置方法

2009/05/11 PHP

php自定文件保存session的方法

2014/12/10 PHP

php获取当前月与上个月月初及月末时间戳的方法

2016/12/05 PHP

PHP面向对象程序设计继承用法简单示例

2018/12/28 PHP

laravel5表单唯一验证的实例代码

2019/09/30 PHP

laravel model模型处理之修改查询或修改字段时的类型格式案例

2019/10/17 PHP

jQuery javaScript捕获回车事件(示例代码)

2013/11/07 Javascript

探究Vue.js 2.0新增的虚拟DOM

2016/10/20 Javascript

BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

2016/12/08 Javascript

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

2017/06/16 Javascript

JavaScript日期工具类DateUtils定义与用法示例

2018/09/03 Javascript

微信小程序实现签到功能

2018/10/31 Javascript

express express-session的使用小结

2018/12/12 Javascript

解决vue-cli 打包后自定义动画未执行的问题

2019/11/12 Javascript

jQuery操作元素的内容和样式完整实例分析

2020/01/10 jQuery

js 获取扫码枪输入数据的方法

2020/06/10 Javascript

[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC

2014/05/22 DOTA

简单的连接MySQL与Python的Bottle框架的方法

2015/04/30 Python

Python基于Tkinter的HelloWorld入门实例

2015/06/17 Python

在Mac OS上搭建Python的开发环境

2015/12/24 Python

用Python实现随机森林算法的示例

2017/08/24 Python

简述Python2与Python3的不同点

2018/01/21 Python

python中partial()基础用法说明

2018/12/30 Python

Python网络爬虫之爬取微博热搜

2019/04/18 Python

使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)

2019/05/28 Python

python面向对象反射原理解析

2019/08/12 Python

python for循环remove同一个list过程解析

2019/08/14 Python

详解使用Python下载文件的几种方法

2019/10/13 Python

使用Python串口实时显示数据并绘图的例子

2019/12/26 Python

解决Django部署设置Debug=False时xadmin后台管理系统样式丢失

2020/04/07 Python

中学生关于梦想的演讲稿

2014/08/22 职场文书

2014年民政局关于保密工作整改措施

2014/09/19 职场文书

2016春季幼儿园大班开学寄语

2015/12/03 职场文书

合作意向书范本

2019/04/17 职场文书

互联网的下一个风口：新的独角兽将诞生

2019/08/02 职场文书