Vue2 计算方法与计算属性

布织锁云

已于 2023-06-03 12:45:25 修改

阅读量272

点赞数

文章标签： vue.js 前端

于 2023-06-02 10:03:40 首次发布

本文链接：https://blog.csdn.net/qq_52731478/article/details/131001254

版权

计算方法 methods 计算属性 computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 挂载点（vue容器） -->
    <div class="app">
        <!-- {{}}差值表达式 mastch语法 -->
        <h2>品名：{{pname}}</h2>
        <h2>价格：{{price}}</h2>
        <h2>数量：{{num}}</h2>
        <h2>总价：{{price*num}}</h2>
        
        <h2>方法计算总价：{{total()}}</h2>
        <h2>计算属性计算总价：{{total1}}</h2>			 <!-- 计算属性差值语法不要写括号 -->
        
        <button @click="add">价格+1</button>
        <button @click="btn(111,$event)">价格+1</button>
        <button v-on:click="add">价格+1</button>
        
    </div>

    <script>
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',  //指定容器
            data:{      //指定数据      修改数据，上面的数据也会随之变化
                pname:'小米',
                price:6999,
                num:5
            },
            methods: {		//方法
                total(){
					let result = this.price*this.num
					return result
				}
				add(e){
                	console.log(e.target)			//打印add触发的dom元素
                    this.price++				//this代表vue实例vm
                },
                btn(value,e){
                	console.log(value)
                	console.log(e.target)			//打印btn触发的dom元素
                }
            },
            computed:{			//计算属性
				total1(){
					let result = this.price*this.num
					return result
				}
			}
        })

        
    </script>

</body>
</html>

计算属性解决冒泡

<!-- 挂载点（vue容器） -->
    <div class="app">
        <div @click="btnF">
            <!-- 解决冒泡方法二：在子级用vue的.stop属性 -->
            <button @click.stop="btnC($event)">点我冒泡</button>
        </div>
    </div>

    <script>
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',
           methods:{
                btnF(){
                    console.log('触发了父级点击事件');
                },
                btnC(e){
                    console.log('触发了子级点击事件');
                    // 解决冒泡方法一：在子级用es6的e.stopPropagation();方法
                    // e.stopPropagation();
                }
            },
            
        })
    </script>

计算属性与计算方法区别

计算属性所依赖的数值如果不发生变化，多次调用该函数，该函数就只会调用一次，重复调用的结果直接从缓存中获取数据（多次使用计算属性，结果显示多次，但方法只允许一次）

多次使用方法进行运算，方法调用多次

计算属性getter setter

<div class="app">
        <h1>{{getResult}}</h1>
        <button @click="changePrice()">计算方法修改价格</button>
        <!-- v-on:click="changePrice()"   语法糖形式  @click="changePrice()"  -->
        <button @click="getResult=500">计算属性修改价格</button>
    </div>

    <script>
        // 创建vue实例
        const vm = new Vue({            //vm Vue{}
            el:'.app',  //指定容器
            data:{      //指定数据      修改数据，上面的数据也会随之变化
                pname:'小米',
                price:6999,
                num:3
            },
            methods:{
                changePrice(){
                    this.price=200
                }
            },
            computed:{
                // getResult(){
                //     return this.price*this.num
                // }

                getResult:{
                    get(){
                        return this.price*this.num
                    },
                    set(value){
                        this.price=value
                    }
                }
            }
        })
    </script>

Eg:全选与取消

    <div class="app">
        <!-- 多选按钮点击后调用计算属性changeAll，将按钮的value作为参数传递，在计算属性的set接收 -->
        <input type="checkbox" v-model="changeAll">全选/取消
        <ul>
            <li v-for="(item,index) in arr" :key="index">
                <input type="checkbox" name="" id="" v-model="item.type">{{item.title}}
            </li>
        </ul>
    </div>
    

    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                arr:[
                    {type:false,title:'列表1'},
                    {type:true,title:'列表2'},
                    {type:true,title:'列表3'},
                    {type:true,title:'列表4'},
                ]
            },
            computed:{
                changeAll:{
                    get(){
                        // 借助计算属性的特殊性，灵活应用get（）
                        console.log(this.arr);

                        // 方法一：
                        // let flag = true
                        // this.arr.map(item=>{
                        //     if(!item.type){     //只要一个列表状态为false
                        //         flag = false
                        //     }
                        // })
                        // return flag
                        
                        // 方法二：
                        // let flag = true
                        // this.arr.forEach(item=>{
                        //     if(!item.type){     //只要一个列表状态为false
                        //         flag = false
                        //     }
                        // })
                        // return flag

                        // 方法三：
                        // return this.arr.every(item=>item.type==true)

                        // 方法四
                        return !(this.arr.some(item=>item.type==false))
                        
                    },
                    set(value){
                        // console.log('当前全选按钮状态：',value);
                        this.arr.map(item=>item.type=value)
                    }
                }
            }

        })
    </script>

在这里插入图片描述