编程 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 相关文章推荐

jQuery 学习第五课 Ajax 使用说明

May 17 Javascript

另一个javascript小测验(代码集合)

Jul 27 Javascript

JavaScript中诡异的delete操作符

Mar 12 Javascript

javascript鼠标滑过显示二级菜单特效

Nov 18 Javascript

jQuery实现文字自动横移

Jan 08 Javascript

浅谈Vue.js应用的四种AJAX请求数据模式

Aug 30 Javascript

webpack4+Vue搭建自己的Vue-cli项目过程分享

Aug 29 Javascript

玩转vue的slot内容分发

Sep 22 Javascript

vue悬浮可拖拽悬浮按钮的实例代码

Aug 20 Javascript

使用uni-app开发微信小程序的实现

Dec 13 Javascript

解决ant design vue中树形控件defaultExpandAll设置无效的问题

Oct 26 Javascript

jquery插件实现搜索历史

Apr 24 jQuery

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

PHP中使用strpos函数实现屏蔽敏感关键字功能

2014/08/21 PHP

Laravel5中contracts详解

2015/03/02 PHP

深入理解PHP中的Streams工具

2015/07/03 PHP

SSO单点登录的PHP实现方法（Laravel框架）

2016/03/23 PHP

PHP使用finfo_file()函数检测上传图片类型的实现方法

2017/04/18 PHP

分享XmlHttpRequest调用Webservice的一点心得

2012/07/20 Javascript

用JavaScript实现一个代码简洁、逻辑不复杂的多级树

2014/05/23 Javascript

Javascript获取统一管理的提示语(message)

2016/02/03 Javascript

jQuery动态添加可拖动元素完整实例(附demo源码下载)

2016/06/21 Javascript

浅析BootStrap中Modal（模态框）使用心得

2016/12/24 Javascript

js实现选项卡内容切换以及折叠和展开效果【推荐】

2017/01/08 Javascript

详解JS中的快速排序与冒泡

2017/01/10 Javascript

AngularJS学习第二篇 AngularJS依赖注入

2017/02/13 Javascript

JavaScript数据结构之数组的表示方法示例

2017/04/12 Javascript

vue中锚点的三种方法

2018/07/06 Javascript

深入理解Puppeteer的入门教程和实践

2019/03/05 Javascript

使用express获取微信小程序二维码小记

2019/05/21 Javascript

在React中写一个Animation组件为组件进入和离开加上动画/过度效果

2019/06/24 Javascript

layui实现把数据表格时间戳转换为时间格式的例子

2019/09/12 Javascript

element-ui 文件上传修改文件名的方法示例

2019/11/05 Javascript

jQuery 判断元素是否存在然后按需加载内容的实现代码

2020/01/16 jQuery

js实现轮播图效果 z-index实现轮播图

2020/01/17 Javascript

node.js中fs文件系统模块的使用方法实例详解

2020/02/13 Javascript

js中复选框的取值及赋值示例详解

2020/10/18 Javascript

JavaScript代码实现简单计算器

2020/12/27 Javascript

[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20

2020/12/23 DOTA

Python设计模式之抽象工厂模式

2016/08/25 Python

TensorFlow saver指定变量的存取

2018/03/10 Python

Python如何将将模块分割成多个文件

2020/08/04 Python

kmart凯马特官网：美国最大的打折零售商和全球最大的批发商之一

2016/11/17 全球购物

中学老师的自我评价

2013/11/07 职场文书

大学班长的职责

2014/01/27 职场文书

失职检讨书大全

2015/01/26 职场文书

求职信如何撰写？

2019/05/22 职场文书

有关信念的名言语录集锦

2019/12/06 职场文书

Django cookie和session的应用场景及如何使用

2021/04/29 Python