Vue学习笔记—基础语法(三)

十五、computed(计算属性)

1、简介

计算属性一般就是用来通过其他的数据算出一个新数据,而且它有一个好处就是它把新的数据缓存下来了,当其他的数据没有发生改变,它调用的是缓存的数据,这就极大的提高了我们程序的性能。

2、例子:

<div id="app">
    {{str}} <br>
    {{ str.split('').reverse().join('') }}<br>
    {{ str1 }}
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            str: 'abc'
        },
        computed: {
            // computed是一个对象,里面写方法,这个方法名可以作为data去使用,值就是这个方法的返回值
            // 计算属性是有依赖缓存的
            str1 () {
                return this.str.split('').reverse().join('')
            }
        }
    })
</script>

3、computed原理:

<div id="app">
    姓:<input type="text" v-model="xing">
    名:<input type="text" v-model="ming">
    姓名:<input type="text" v-model="username">
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            xing: '',
            ming: '',
        },
        computed: {
            // username() {
            //     return this.xing + this.ming
            // }
            username: {
                set(value) {
                    // 修改username的时候就会走set,参数就是修改之后的值
                    console.log(value);
                    this.xing = value.slice(0, 1)
                    this.ming = value.slice(1)
                },
                get() {
                    // 
                    return this.xing + this.ming
                }
            }
        }
    })
</script>

4、计算属性模糊查询:

<div id="box">
    <input type="text" v-model="mytext" />

    <ul >
        <li v-for="data in getDataList" :key="data">
            {{data}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    //["aaa","bbb","ccc","ddd","add","cee","eee"]        

    var vm = new Vue({
        el:"#box",
        data:{
            mytext:"",
            datalist:["aaa","bbb","ccc","ddd","add","cee","eee"]
        },
        computed: {
            getDataList(){
                return this.datalist.filter(item=>item.includes(this.mytext))
            }
        },
    })

    var arr = ["aaa","bbb","ccc","ddd","add","cee","eee"]  

    function kerwinfilter(arr){
        var list = []
        list  = arr.filter(item=>item.includes("a"))
        // return list;
        console.log(list)
    }

    kerwinfilter(arr);
</script>

5、注意:

  • computed 是一个对象,里面写方法,这个方法名可以作为 data 去使用,值就是这个方法的返回值
  • computed计算属性是由依赖缓存的
  • computed计算属性是单向的

十六、watch(侦听器)

1、例子:

<div id="app">
    姓:<input type="text" v-model="xing">
    名:<input type="text" v-model="ming">
    姓名:<input type="text" v-model="username">
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            xing: '',
            ming: '',
            username: ''
        },
        // watch是监听器,只要数据被修改了就会重新渲染
        // computed有依赖缓存
        // computed一般是依赖某个属性得到一个新的值
        // watch一般用来监听某个值的变化然后进行一些操作,可能并不需要得到新的值
        watch: {
            xing (newV, oldV) {
                // 当data里的xing字段发生变化的时候就会走这个方法
                // newV是修改之后的最新的值, oldV是修改之前的旧值
                this.username = newV + this.ming
            },
            ming (newV, oldV) {
                this.username = this.xing + newV
            },
            username (newV, oldV) {
                this.xing = newV.slice(0, 1)
                this.ming = newV.slice(1)
            }
        }
    })
</script>

2、computed 和 watch 的区别:

  • watch 是监听器,只要数据被修改了就会重新渲染
  • computed 有依赖缓存
  • computed 一般是依赖某个属性得到一个新的值
  • watch 一般用来监听某个值的变化然后进行一些操作吗,可能并不需要得到新的值

十七、filters(过滤器)

1、例子:

<div id="app">
    <ul>
        <li v-for="shop in list">
            <span>{{shop.title}}</span>
            <b>{{shop.status | formatStatus}}</b>
            <em>{{shop.price | toFixed2 | addDanwei}}</em>
        </li>
    </ul>
</div>
<div id="app1">
    {{ num  | addDanwei }}
    <!-- {{ num | toFixed2 | addDanwei }} -->
</div>
<script>
    // 全局过滤器,在下面这两个vue实例里都能使用
    Vue.filter('addDanwei', (value) => {
        return '¥' + value
    })
    // app1里就用不了app里定义的局部过滤器
    const app1 = new Vue({
        el: '#app1',
        data: {
            num: 12
        }
    })
    const app = new Vue({
        el: '#app',
        data: {
            list: [
                { id: 1, status: '001', title: '拖把', price: 19.99999 },
                { id: 2, status: '004', title: '扫把', price: 9 },
                { id: 3, status: '003', title: '簸箕', price: 29.1 },
                { id: 4, status: '002', title: '吸尘器', price: 2999.159839 },
                { id: 5, status: '005', title: '鸡毛掸子', price: 23.19 }
            ]
        },
        // 局部过滤器,只有当前vue实例里能使用
        filters: {
            formatStatus(status) {
                // status就是使用过滤器位置的值
                const statusMap = {
                    '001': '未付款',
                    '002': '待发货',
                    '003': '已发货',
                    '004': '已签收',
                    '005': '已评价'
                }
                return statusMap[status]
            },
            toFixed2(num) {
                return num.toFixed(2)
            }
        }
    })
</script> 

注意:

  • 过滤器应该被添加在 JavaScript 表达式的尾部,由“|(管道)”符号指示
  • 局部过滤器使用 filters,全局过滤器使用 Vue.filter
  • 当全局过滤器和局部过滤器重名时,会采用局部过滤器
  • 过滤器可以串联,过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:Vue学习笔记—基础语法(三)

文章字数:1.3k

本文作者:Spicy boy

发布时间:2018-05-10, 17:52:21

最后更新:2021-03-08, 17:20:02

原始链接:http://www.spicyboy.cn/2018/05/10/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95-%E4%B8%89/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏