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

2019-11-19 12:00:20

字体：大中小

来源：转载

供稿：网友

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

一、模板

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>www.VeVB.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>

二、过滤器

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

系统提供一些过滤器:

{{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.VeVB.COm/code/HtmlJsRun测试上述代码运行效果。

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

上一篇：深入理解Node内建模块和对象

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