Vue框架整理：二、插值、表达式与过滤器

这里写图片描述

插值与表达式

1、双大括号：{{ }} 是最基本的“文本”插值方法，能够实时显示我们需要的数据


<script>

    var app=new Vue({
        el:"#v1",
        data:{
            date:new Date()
        },
        mounted:function () {
            var current=this;
            this.timer=setInterval(function () {
                current.date=new Date().getSeconds();   //每秒刷新当前时间的秒数位
            },1000);
        },
        beforeDestory:function () {
            if(this.timer){
                clearInterval(this.timer);
            }
        }
    })
</script>

这里写图片描述 {{ }} 也可以直接在HTML中直接使用JavaScript的部分表达式进行一些简单运算：

<body>



<div id="v1">
    <p>
        {{ today.split("") }}
    </p>

    <p>
        {{ mood ? "放松" : "高兴" }}
    </p>


</div>

<script src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            today:"今天是周末",
            mood:true
        }
    })

</script>

页面显示：

这里写图片描述

这里需要注意一下，目前只支持单个表达式、并且不能使用自定义变量，只能用Vue白名单内的全部变量，Date , Math等；

2、 v-pre ：这个不会将双大括号{{ }} 进行转义


<p v-pre>{{ escaped }}</p>

页面上显示： {{ no escaped }}

没有将{{ }}中内容进行转义，直接输出括号里的信息

3、v-html 直接渲染出 HTMLElement


<body>

<div id="v1">
    <span v-html="link"></span>
</div>

<script src="vue.min.js"></script>
<script>
    var app=new Vue({
        el:"#v1",
        data:{
            link:"<button>vue按钮</button>"
        }
    })

</script>
</body>

页面显示：
这里写图片描述

这里写图片描述

Vue 过滤器
可以用管道符 | 对数据进行过滤，过滤的规则自定义，然后通过Vue实例添加选项 filters设置


<body>

    <div id="v1">

        {{ date | setDate }}

    </div>

    <script src="vue.min.js"></script>

    <script>
    var app=new Vue({
        el:"#v1",
        data:{
           date:new Date()
        },
        filters:{
            setDate:function (value) {
                var date=new Date(value);
                var year=date.getFullYear(),
                    m=date.getMonth()+1,
                    month=m<10 ? "0"+m : m,
                    d=date.getDate(),
                    day=(d<10) ? "0"+d : d;

                return year+"-"+month+"-"+day;
            }
        }
    })
</script>
</body>

过滤器也可以串联或接收参数：

语法：

串联： {{ message | 方法1 | 方法2 }}

接收参数： {{ message | 方法名（‘arguments1’ , ‘arguments2’）}}

简单的数据处理可以使用过滤器，遇到复杂的还是建议用其他方法计算比较好一些

Vue框架整理：二、插值、表达式 与 过滤器

插值 与 表达式

猜你喜欢

Vue框架整理：二、插值、表达式与过滤器

插值与表达式