vue08-computed get与set方法

向右看齐 2022-05-10 00:08 197阅读 0赞

上篇博客，只用了computed的get方法，获取计算属性的值。set方法为给计算属性赋值时执行的方法

<!DOCTYPE html>
    <html lang=en>
    
    <head>
        <meta charset="utf-8" />
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    
    <body>
        <div id="root">
            {
       {fullName}}
        </div>
    
    
        <script>
            var vm = new Vue({
                el: "#root",
                data: {
                    firstName: "xu",
                    lastName: "haixing"
                },
                computed: {
                    fullName: {
                        get: function () {
                            return this.firstName + " " + this.lastName;
                        },
                        set: function (value) {
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                            console.log("value" + value);
                        }
                    }
                }
            })
    
        </script>
    </body>
    
    </html>

例子中，firstName与lastName改变会计算fullName值，fullName改变也会计算fistName与lastName值。看演示效果：

![70][]

[70]: /images/20220510/5899cabbc6fc45c29f5ad80b057ebd8d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计算属性之：computed属性中的get与set用法

et：设置值时触发。 get：获取值时触发，与set是没有必然联系的。 <html> <head> <meta http-equiv="Con...

r囧r小猫/ 2024年04月18日 18:42/ 0 赞/ 78 阅读

相关 vue计算属性computed中的get和set的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我不是女神ヾ/ 2023年05月22日 22:10/ 0 赞/ 12 阅读

相关 Vuejs computed set get计算属性

直接贴代码，看注释 <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessage的计算属性

柔光的暖阳◎/ 2022年06月09日 12:12/ 0 赞/ 248 阅读

相关 vue.js的computed,filter,get,set的用法及区别

1、vue.js的computed方法：处理复杂逻辑，基于依赖缓存，当依赖发生改变时会重新取值。用methods也可以实现同样的效果，但methods在重新渲染的时候会重

曾经终败给现在/ 2022年06月09日 12:12/ 0 赞/ 252 阅读

相关构造方法与get,set

package lei; public class Student \{ private String name; private String sno; pr

╰半橙微兮°/ 2022年05月15日 12:30/ 0 赞/ 212 阅读

相关 vue08-computed get与set方法

上篇博客，只用了computed的get方法，获取计算属性的值。set方法为给计算属性赋值时执行的方法 <!DOCTYPE html> <html lang=

向右看齐/ 2022年05月10日 00:08/ 0 赞/ 198 阅读

相关 vue学习(六) computed的get和set方法

1，测试代码 <table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> <html lan

我就是我/ 2022年04月22日 09:52/ 0 赞/ 212 阅读

相关 vue computed计算属性的get和set函数

get和set都是回调函数什么是回调函数：1/你定义的 2/你没有调用 3/但最终执行了关于回调函数需要知道的两个问题：1/什么时候调用 2/用来做什么

柔光的暖阳◎/ 2022年04月21日 15:14/ 0 赞/ 233 阅读

相关 Vue学习笔记3.5 计算属性computed中的 get方法和set方法

关于computed计算属性的内容可以移步到这里查看，这里就不再啰嗦 [https://blog.csdn.net/soulwyb/article/details/8622

淩亂°似流年/ 2022年03月28日 11:25/ 0 赞/ 1592 阅读

相关 Vuejs computed get set 计算属性

直接看代码吧 \`\`\` <template> <div id="example"> <!-- 设置计算属性的绑定字段，即reversedMessa

电玩女神/ 2022年02月04日 11:15/ 0 赞/ 328 阅读