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

javascript while语句和do while语句的区别分析

Dec 08 Javascript

FireFox与IE 下js兼容触发click事件的代码

Nov 20 Javascript

cnblogs中在闪存中屏蔽某人的实现代码

Nov 14 Javascript

JavaScript中的property和attribute介绍

Dec 26 Javascript

JSON辅助格式化处理方法

Mar 26 Javascript

js QQ客服悬浮效果实现代码

Dec 12 Javascript

使用AngularJS编写较为优美的JavaScript代码指南

Jun 19 Javascript

js实现图片放大和拖拽特效代码分享

Sep 05 Javascript

AngularJS基础 ng-list 指令详解及示例代码

Aug 02 Javascript

JavaScript toUpperCase()方法使用详解

Aug 26 Javascript

vue debug 二种方法

Sep 16 Javascript

vue项目首屏加载时间优化实战

Apr 23 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