vue教程1-07 模板和过滤器

Vue.js模板与过滤器

转载于 2017-04-26 10:52:00 发布 · 74 阅读

文章标签：

#javascript #ViewUI

本文介绍了Vue.js中模板的基本用法，包括不同类型的插值表达式及其应用场景，并详细讲解了如何使用内置过滤器来处理数据显示，如字符串大小写转换、货币格式化等。

vue教程1-07 模板和过滤器

一、模板

{{msg}} 数据更新模板变化

{{*msg}} 数据只绑定一次

{{{msg}}} HTML转意输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script src="vue.js"></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>

二、过滤器

过滤器:-> 过滤模板数据
系统提供一些过滤器:

uppercase eg: {{'welcome'| uppercase}}
lowercase
capitalize 首字母大写

currency 钱

{{'welcome'|uppercase}}    //WELCOME

{{'WELCOME'|lowercase}}   //welcome

{{'WELCOME'|lowercase|capitalize}}   //Welcome

{{12|currency}}  //$12.00

{{12|currency '￥'}}  //￥12.00