编程 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控件

Mar 27 Javascript

JavaScript编程开发中的五个实用小技巧

Jul 22 Javascript

javascript实现的图片切割多块效果实例

May 07 Javascript

基于JavaScript实现一定时间后去执行一个函数

Dec 14 Javascript

js模仿java的Map集合详解

Jan 06 Javascript

JavaScript添加随滚动条滚动窗体的方法

Feb 23 Javascript

通过Tabs方法基于easyUI+bootstrap制作工作站

Mar 28 Javascript

Vue.js双向绑定操作技巧(初级入门)

Dec 27 Javascript

Vue导出json数据到Excel电子表格的示例

Dec 04 Javascript

JavaScript使用享元模式实现文件上传优化操作示例

Aug 07 Javascript

详解a标签添加onclick事件的几种方式

Mar 29 Javascript

OpenLayers实现图层切换控件

Sep 25 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

php教程之魔术方法的使用示例(php魔术函数)

2014/02/12 PHP

php为字符串前后添加指定数量字符的方法

2015/05/04 PHP

PHP函数func_num_args用法实例分析

2015/12/07 PHP

php反射学习之不用new方法实例化类操作示例

2019/06/14 PHP

解决laravel 表单提交-POST 异常的问题

2019/10/15 PHP

爱恋千雪-US-AscII加密解密工具（网页加密）下载

2007/06/06 Javascript

js复制网页内容并兼容各主流浏览器的代码

2013/12/17 Javascript

js对象内部访问this修饰的成员函数示例

2014/04/27 Javascript

jquery获取tagName再进行判断

2014/05/29 Javascript

使用Node.js实现HTTP 206内容分片的教程

2015/06/23 Javascript

学好js，这些js函数概念一定要知道【推荐】

2017/01/19 Javascript

Vue.js学习笔记之常用模板语法详解

2017/07/25 Javascript

浅谈vue首屏加载优化

2018/06/28 Javascript

JS实现图片旋转动画效果封装与使用示例

2018/07/09 Javascript

Vue中使用的EventBus有生命周期

2018/07/12 Javascript

vue下的@change事件的实现

2019/10/25 Javascript

Python中多线程thread与threading的实现方法

2014/08/18 Python

跟老齐学Python之有容乃大的list(2)

2014/09/15 Python

17个Python小技巧分享

2015/01/23 Python

python读取TXT到数组及列表去重后按原来顺序排序的方法

2015/06/26 Python

在Mac OS系统上安装Python的Pillow库的教程

2015/11/20 Python

Python模拟简单电梯调度算法示例

2018/08/20 Python

python 3.6.2 安装配置方法图文教程

2018/09/18 Python

python进程间通信Queue工作过程详解

2019/11/01 Python

使用python-pptx包批量修改ppt格式的实现

2020/02/14 Python

Python虚拟环境的创建和包下载过程分析

2020/06/19 Python

安装不同版本的tensorflow与models方法实现

2021/02/20 Python

面向游戏玩家和书呆子的极客订阅盒：Loot Crate

2020/11/25 全球购物

幼儿园安全检查制度

2014/01/30 职场文书

国际贸易专业个人求职信格式

2014/02/02 职场文书

户外活动策划方案

2014/03/12 职场文书

品牌宣传方案

2014/03/21 职场文书

会议室使用管理制度

2015/08/06 职场文书

2016新教师培训心得体会范文

2016/01/08 职场文书

《鸡兔同笼》教学反思

2016/02/19 职场文书

科学家研发出新型速效酶，可在 24 小时内降解塑料制品

2022/04/29 数码科技