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

来源：调星娱乐

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务