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

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

一、模板

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net vue模板/title style/style脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js ' async/脚本窗口。onload=function(){ new Vue({ El : ' # box '，data : { msg : ' ABC ' })；};/script/headbody div id='box '输入类型=' text ' v-model=' msg ' br { { msg } } br { { * msg } } br { { { msg } }/div/body/html(9500 . 163.com)

二、过滤器

过滤器：- 过滤模板数据

系统提供一些过滤器：

{ { msg | FilterA } } { { msg | FilterA | FilterB } }大写的eg:{{ '欢迎' |大写} }小写的secapitalize首字母大写货币钱{{msg| filterA参数}}

{ { ' WEEKLY ' |大写} }//WEBSPHERE { { ' WEBSPHERE ' |小写} }//WEBSPHERE { { ' WEBSPHERE ' |小写|大写} }//WELCOME { { 12 |货币} }/$ 12.00 { { 12 |货币'000 } }//12.00

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

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