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

我就是我 2022-04-22 09:52 211阅读 0赞

1，测试代码

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;{
       {fullname}}&lt;/div&gt;

&lt;script&gt;
        var app=new Vue({
            el:"#app",
            data:{
                firstname:'hello',
                secondname:'vue'
            },
           computed:{
                fullname: {
                    get:function () {
                        return this.firstname+"---"+this.secondname;
                    },
                    set:function (value) {
                        var arr=value.split("---");
                        this.firstname=arr[0]
                        this.secondname=arr[1]
                    }
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

2，在浏览器控制台  设置  app.fullname='12345677---hshhshs'，可以看到浏览器上面的数据发现变化

![20181104085053904.png][]

[20181104085053904.png]: /images/20220422/581d8de188304ca4a1e870a78e2a505f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 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 赞/ 251 阅读

相关 vue的get 和set

![20180515005832891][] <!DOCTYPE html> <html> <head> <meta charset="utf-

迷南。/ 2022年05月25日 12:41/ 0 赞/ 227 阅读

相关 vue08-computed get与set方法

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

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

相关 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 阅读

相关【Vue】学习笔记六：watch和computed

文章目录 @\[TOC\] \`watch\`属性的使用 \`computed\`计算属性 \`watch\`、\`computed\`和\`methods\`之间的

亦凉/ 2021年09月21日 02:42/ 0 赞/ 382 阅读