<!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. java switch语句注意事项

    /* switch语句的使用注意事项: 1.多个case后面的数据不可以重复 2.switch后面的小括号当中只能是下列数据类型: 基本数据类型:byte . short.char.int 引用数据类 ...

  2. 数据结构---Java---String

    1.概述 1.1 源码(JDK1.8) public final class String implements java.io.Serializable, Comparable<String& ...

  3. java基础学习笔记四（异常）

    Java中的异常 Exception 如图可以看出所有的异常跟错误都继承与Throwable类,也就是说所有的异常都是一个对象. 从大体来分异常为两块: 1.error---错误 : 是指程序无法处理 ...

  4. Spring整合SpringDataJpa配置文件头

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  5. PHP curl_reset函数

    curl_reset— 重置libcurl会话句柄的所有选项. 说明 void curl_reset ( resource $ch ) 该函数将重新初始化cURL的所有选项值(默认值). 注意:cur ...

  6. C#排列组合类，写彩票算法的朋友们可以来看一看

    public class PermutationAndCombination<T>    {        /// <summary>        /// 交换两个变量    ...

  7. WebRequest发送请求并接收返回值

    public string getXmlStr(string hphmcode)         {            string Url = "http://localhost:80 ...

  8. sql中简单的触发器功能

    触发器分为DML触发器和DDL触发器DML触发器包含After触发器,执行insert update delete语句后会触发after触发器,会事务回滚DML触发器还包含instead of触发器, ...

  9. 2018icpc南京/gym101981 I Magic Potion

    题意: 若干个勇士,每个勇士只能杀特定的怪物.每个勇士只能杀1个怪,但是有一些药,喝了药之后能再杀一个,每个勇士只能喝一瓶药.问你最多杀多少怪. 题解: 按照如下建图套网络流板即可. 网上有题解说套D ...

  10. 分布式调度框架TBSchedule使用方法

    一.TBSchedule简介 TBSchedule是来自淘宝的分布式调度开源框架,基于Zookeeper纯Java实现,其目的是让一种批量任务或者不断变化的任务,能够被动态的分配到多个主机的JVM中的 ...