Vue学习_计算属性

最新推荐文章于 2022-09-12 13:24:56 发布

柒月！

最新推荐文章于 2022-09-12 13:24:56 发布

阅读量474

点赞数

分类专栏：前端 Vue 文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/weixin_43736639/article/details/123279261

版权

前端同时被 2 个专栏收录

4 篇文章 3 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

实现姓名案例：

1.插值语法实现姓名案例

直接从vm中读取。

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>姓名案例_插值语法实现</title>
</head>
<body>
    <!--设置一个容器-->
    <div id = "root">
        姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
        名：<input type="text" v-model:value="lastname"></br></br>
        姓名：<span>{{firstname}}-{{lastname}}</span>
    </div>
</body>
<script type="text/javascript">

    const vm = new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三',
        },
    })

</script>
</html>

2.methods方法实现姓名案例

在methods方法中定义了一个fullname（）方法，姓名通过fullname（）方法获取到，其中的this指的是vue实例（如果是箭头函数，this指的就不是vue实例）

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>姓名案例_methods方法实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">
    姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
    名：<input type="text" v-model:value="lastname"></br></br>
    姓名：<span>{{fullname()}}</span>
</div>
</body>
<script type="text/javascript">

    const vm = new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三',
        },
        methods:{
          fullname(){
              return this.firstname + '-' + this.lastname;
          }
        },
    })

</script>
</html>

3.计算属性实现姓名案例

（1）计算属性：是用已经写完的属性加工、计算，生成一个全新的属性。

原理：底层借助了Object.defineproperty提供getter和setter(计算属性修改相应，大多数情况下，计算属性是不修改的)。

优势：与methods相比，内部有缓存机制（复用），效率更高，调试方便。

<!doctype html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>姓名案例_计算属性实现</title>
</head>
<body>
<!--设置一个容器-->
<div id = "root">
    姓：<input type="text" v-model:value="firstname" ></br></br> <!--input框设置初始值用value-->
    名：<input type="text" v-model:value="lastname"></br></br>
    姓名：<span>{{fullname}}</span>
</div>
</body>
<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstname:'张',
            lastname:'三',
        },
        computed:{

            fullname:{
                /*get有什么作用？当有人读取fullname时，get就会被调用，并且get的返回值就是fullname的返回值*/
                /*get什么时候读取？（1）初次读取fullname时；（2）所依赖的数据发生变化时（此处依赖firstname和lastname）*/
                get(){
                    return this.firstname + "-" + this.lastname
                },
                /*set什么时候调用？当fullname被修改时*/
                set(value){
                    const arr = value.split('-')
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })
</script>
</html>

（2）计算属性在只考虑读取，不考虑修改时可以简写，fullname可以当做函数来写，但是读取时不能当做函数读取。

computed:{
            fullname() {
                return this.firstname + "-" + this.lastname;
            }
        }

柒月！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习_计算属性

实现姓名案例：1.插值语法实现姓名案例直接从vm中读取。<!doctype html><html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-s...
复制链接

扫一扫

专栏目录