Vue 学习 2019-3-12 11:32:18

izhuoo

于 2019-03-12 11:38:28 发布

阅读量272

点赞数

CC 4.0 BY-SA版权

分类专栏：学习 Vue 文章标签：学习 Vue

本文链接：https://blog.youkuaiyun.com/izhuoo/article/details/88417550

学习同时被 2 个专栏收录

9 篇文章

订阅专栏

Vue

3 篇文章

订阅专栏

本文深入探讨了Vue.js框架中的关键特性，包括过滤器、计算属性和监控属性的使用方法及其实现细节，通过实例展示了如何利用这些特性提高前端开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：观看https://www.bilibili.com/video/av22950780

Vue CDN ：<script src="https://cdn.bootcss.com/vue/2.6.8/vue.js"></script>

过滤器 filters

用法 {{massage | （函数名）|（函数名）}} <--html

filters:{

（函数名）：function(value){

return (值)；

}，

}，<--script

计算属性 computed

用法 {{massage}}{{massage1}}{{massage2}}

computed:{

massage1:function(){

return (计算值)；

}，

massage2:function(){

return (计算值)；

}，

监控属性 $watch

<div id="myApp">
        <p>{{p1}}===={{p2}}===={{p3}}</p>
        <button @click="btn1000(1000)">加1000</button> <!--动态添加数值 -->
</div>
<script>
        var myApp = new Vue({
            el:'#myApp',
            data:{
                p1: 123,
                p2: 666,
                p3: 777,
            },
            watch:{ //监控属性
                p1:function(new1,old2){
                    console.log(new1,old2);
                },
            },
            methods:{ 
                btn1000:function(add1000){
                    this.p1 += add1000;
                }
            }
        });
</script>