Vue数据（data）方法（methods）、计算（computed）的介绍使用

y17757773039

已于 2022-10-29 22:42:02 修改

阅读量6.2k

点赞数 4

文章标签： vue.js javascript 前端 1024程序员节

于 2022-09-08 17:03:15 首次发布

本文链接：https://blog.csdn.net/y17757773039/article/details/126767160

版权

一、数据
1、data：数据
2、data选项表示：当前Vue实例可以使用的数据
3、data选项的值：对象，对象中可以定义多个数据
4、js中获取data数据：vm.$data.name 或者 vm.name
5、代码：

 var vm=new Vue({
            el: "#app",
            data:{
                name:'定义初始数据'
            },
        });
        console.log(vm.$data.name);
        console.log(vm.name);

二、方法
1、methods:方法，为啥加s，因为可以有多个方法
2、methods选项表示：当前Vue实例可以用到的方法
3、methods选项值：对象，对象中定义方法
4、代码：

<!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>初始数据</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- el元素绑定器，一般当做id选择器 -->
    <!-- data是数据，定义一个name为初始数据 -->
    <!--  this.name 表示当前vue中的data数据中的name-->
    <!-- methods是定义方法的地方，定义一个showInfo方法 -->
    <div id="app">
        <button  @click="showInfo">请点击</button>
        <button  @click="showInfo01">别点击</button>
        <h1>{{name}}</h1>
    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data:{
                name:'定义初始数据'
            },
            methods: {
                showInfo(){
                    this.name='触发事件01'
                },
                showInfo01(){
                    this.name='触发事件02'
                }
            }
        });
        console.log(vm.$data.name);
        console.log(vm.name);

    </script>
</body>
</html>

5、页面显示：
点击“请点击”，显示触发事件01；点击"别点击"，显示触发事件02
在这里插入图片描述

三、计算
1、computed：计算
2、computed选项表示:当前Vue实例可以用到的计算属性
3、computed选项的值：对象，对象中定义方法
4、应用场景：需要数据随着其他数据变动时、处理计算逻辑时
5、注意：
首先，计算属性，定义时是一个方法，但是当做属性使用（所以叫计算属性）
其次，计算属性需要将结果返回
最后，计算属性具有缓存（计算属性没有进行数据更新，computed会直接从缓存中获取值）
6、代码：

<!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="../vue.js"></script>
</head>
<!-- computed计算,里面定义会变化的属性 -->
<body>
    <div id="app">
        <p>总价格:{{totalPrice}}</p>
        <p>单价:{{price}}</p>
        <p>数量:{{num}}</p>
        <div>
        <!-- num==0 ? 0:num--是三元表达式，约等于if语句，但是会生成值-->
        <!--@是v-on的代写,实际上是v-on:click=""监听点击事件，里面可以是方法，可以是js -->
            <button @click="num==0 ? 0:num--">减少数量</button>
            <button @click="num++">增加数量</button>
        </div>

    </div>
    <script>
        var vm=new Vue({
            el: "#app",
            data:{
                num: 0,
                price: 20
            },
            computed:{
            	//totalPrice属性，虽是方法可以当属性使用，使用方法{{totalPrice}}
                totalPrice(){
                    return this.price*this.num
                }
            },

        })
    </script>
</body>
</html>