<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>vue</title>

     </head>

     <body>

         <div id="app">

             <div>

                 {{fullName}}

                 {{age}}

             </div>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script>

             var app = new Vue({

                 el: '#app',

                 data: {

                     firstName: 'Tom',

                     lastName: 'Lee',

                     age: '33'

                 },

                 computed: {

                     fullName: {

                         get: function() {

                             return this.firstName + " " + this.lastName;

                         },

                         set: function(value) {

                             var arr = value.split(' ');

                             this.firstName = arr[0];

                             this.lastName = arr[1];

                         }

                     }

                 }

             })

         </script>

     </body>

 </html>

set得到值后可以改变data的值

vue 计算属性的setter getter的更多相关文章

  1. 3-4 计算属性的setter和getter

    Vue中的计算属性的setter和getter //如上,fullName这个方法在取这个数据的时候,会执行get中的方法:而在设置数据时,会执行set中的方法.其中set中有个参数(value),用 ...

  2. 初识Vue——计算属性和观察者

    一.计算属性 在模板内使用 1.基础例子 <template> <div class="main"> <div id="reverse_st ...

  3. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  4. 温故vue对vue计算属性computed的分析

    vue 复习笔记(1)一段时间没有看过vue的官方文档了,温故而知新,所以我决定将vue的文档在看一遍 1计算属性computed在vue的computed中声明的是计算属性,可以使用箭头函数来进行定 ...

  5. vue——计算属性和侦听器

    一.计算属性(data中的相关数据) 侦听多个属性时——计算属性 comuted. 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: & ...

  6. vue计算属性和观察者

    1. 计算属性 模板内的表达式非常便利,但在模板中放入太多的逻辑会让模板过重且难以维护,所有就有了计算属性 例子: //html代码 <div id="example"> ...

  7. 七、vue计算属性

    细节流程图 初始化 计算属性的初始化是发生在 Vue 实例初始化阶段的 initState 函数中,执行了 if (opts.computed) initComputed(vm, opts.compu ...

  8. vue 计算属性和监听器

    一.计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div> {{ message.split('').rev ...

  9. vue 计算属性与侦听器

    侦听器:顾名思义,就是用来监听数据变化用的.侦听器在vue实例中,定义变量watch来使用.监听新值newVal和旧值oldVal,具体使用方法如下: <!DOCTYPE html> &l ...

随机推荐

  1. Opencv3.3(Linux)编译安装至python的坑

    编译安装OpenCV绝对是一件让人发狂的事情,CMake繁多的选项,国内蛋疼的网速,实在让人无力吐槽,然而为了使用contrib包,我不得不重新编译他. OpenCV的编译 其实OpenCV编译并不是 ...

  2. day01 html介绍 文档声明头 head标签 body标签

    day01 html   初识html <!--文档的声明--> <!doctype html>   <html lang="en">    # ...

  3. 常用yum源之(Percona MySQL)

    [percona]name = CentOS $releasever - Perconabaseurl=http://repo.percona.com/centos/$releasever/os/$b ...

  4. Quartz.Net 任务调度之简单任务(1)

    本文github链接 https://github.com/sunshuaize/cnBlogDemos/tree/master/Quartz.Net%20%E4%BB%BB%E5%8A%A1%E8% ...

  5. URAL 1057 Amount of Degrees （数位dp）

    Create a code to determine the amount of integers, lying in the set [X;Y] and being a sum of exactly ...

  6. 【LeetCode 36】有效的数独

    题目链接 [题解] 就一傻逼模拟题 [代码] class Solution { public: bool isValidSudoku(vector<vector<char>>& ...

  7. 外部表及oracle数据库内存

    create table alert1 (log varchar2(1000))2 organization external3 (type oracle_loader4 default direct ...

  8. ZROI week6

    ZROI week6 T1 用一个类似背包的东西记录答案. T2 好像直接用|操作即可. T3 瞎搞就完事了 T4 启发式合并,然而变量写错了,就没了... 总结 100 + 100 + 100 + ...

  9. ARMv8 架构与指令集.学习笔记

    目 录 第1章 ARMv8简介. 3 1.1基础认识. 3 1.2 相关专业名词解释. 3 第2章 Execution State 4 2.1 提供两种Execution State 4 2.2 决定 ...

  10. Procedure or function 'pu_usr_User' expects parameter '@WhiteIp', which was not supplied.

    遇到这个问题,是因为存储过程的参数,设置默认值写错了. 错误写法 @WhiteIp NVARCHAR(MAX) NULL, Stored procedure with default paramete ...