Vue实例的基本属性

最新推荐文章于 2024-04-23 09:40:10 发布

须臾不敢忘

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量849

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74331160/article/details/128457139

版权

一、Vue实例的计算属性：computed。计算属性结果会被缓存起来，当依赖的响应式属性发生变化时，才会重新计算，返回最终结果。

<body>
    <div id="app">
        <p>总价：{{ totalPrice }}</p>
        <p>单价：{{ price }}</p>
        <p>数量：{{ num }}</p>
        <button @click="num==0?0:num--">减少</button>
        <button @click="num++">增加</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                price:20,
                num:0
            },
            computed:{
                totalPrice(){
                    return this.price * this.num
                }
            }
        })
    </script>
</body>

二、Vue实例的状态监听属性：watch，可以对元素的值的变化进行跟踪

<body>
    <div id="app">
        <label for="">
            城市名：<input type="text" v-model="cityName">
        </label>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                cityName:'shanghai'
            },
            watch:{
                cityName(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        })
    </script>
</body>

三、Vue实例的过滤器：filters，可以直接操作数据，对数据按要求进行过滤

1、作用：

（1）文本格式化

（2）对数组元素进行筛选、排序

2、注意：Vue2.0版本后内置过滤器被废除，用户若要使用需自己编写

3、使用的方式：

（1）插值表达式中通过管道符’|’实现：{{ 文本或数组 | 过滤器 }}

（2）在v-bind中通过管道符’|’实现：

<div v-bind:id= "myId | 过滤器 "></div>

强调：过滤器的本质是函数

4、根据作用范围的不同，分为全局过滤器和局部过滤器

（1）全局过滤器的定义：

Vue.filter（id,[definition]）

第一个参数id：表示过滤器的名称(过滤器的唯一标识)

第二个参数：是一个函数对象，定义了过滤器的具体实现过程

<body>
    <!-- 全局过滤器 -->
    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message|Cate }}</p>
    </div>
    <script>
        Vue.filter('Cate',function(value){
            if(!value)return ''
            value = value.toString()
            return value.toUpperCase()
        })
        const vm = new Vue({
            el:'#app',
            data:{
                message:'javascript'
            }
        })
    </script>
</body>

（2）局部过滤器的定义：是在Vue实例的选项对象中使用filters选项来注册。只在注册的Vue实例中有效

<body>
    <!-- 局部过滤器 -->
    <div id="app">
        <input type="text" v-model="message">
        <p>{{ message|Cate }}</p>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: 'javascript'
            },
            filters: {
                Cate: function (value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.toUpperCase()
                }
            }
        })
    </script>
</body>