<!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. IronPython C#与Python相互调用

    ironphy  microsoft.scripting dll using System;using System.Collections.Generic;using System.Linq;usi ...

  2. 一次goldengate故障引发的操作系统hang起，HA自动切换

    现场: 跑着数据库的主机A报警应用连接不上数据库,我们无法ssh到主机.第一反应是通过telnet到远程控制口,发现数据库资源和硬件资源在被切换到HA架构的主机B(备机,通常性能比主机A的差,抗不住应 ...

  3. Java中的多表&事务&DCL&一个多表操作例子

    准备sql: 创建部门表 CREATE TABLE dept( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR(20) ); INSERT INTO d ...

  4. UNP学习 路由套接口

    一.概述 在路由套接口中支持三种类型的操作: 1.进程能通过写路由套接口想内核发消息.举例:路径就是这样增加和删除的. 2.进程能在路由套接口上从内核读消息. 3.进程可以用sysctl函数得到路由表 ...

  5. UNP学习第九章 基本名字与地址转换

    之前都用数值地址来表示主机(206.6.226.33),用数值端口号来标识服务器. 然而,我们应该使用名字而不是数值:名字比较容易记,数值地址可以改变但名字保持不变. 随着往IPv6上转移,数值地址变 ...

  6. 常用js校验

    身份证 function isCardNo(idCard){ //15位和18位身份证号码的正则表达式 var regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0 ...

  7. 工程师技术(三)：独立Web站点的快速部署、虚拟Web主机的部署、配置网页内容访问、使用自定Web根目录、配置安全Web服务、部署并测试WSGI站点

    一.独立Web站点的快速部署 目标: 本例要求为 http://server0.example.com 配置Web站点,要求如下: 1> 从http://classroom/pub/materi ...

  8. webpack中的url-loader

    使用url-loader引入图片,可以说它是file-loader的增强版 url-loader会把我们的图片使用base64的形式编码成另外一种字符串,网页是可以识别这种编码的东西的,这样的好处是, ...

  9. Windows 08R2_破解管理员密码

    目录 目录 破解Windows 08R2管理员密码 破解Windows 08R2管理员密码 将登录界面的功能链接变成cmd.exe的链接,通过CMD进入到目录C:\Windows\System32下, ...

  10. java.lang

    package cn.sxt;   import java.lang.*;   public class BooleanDemo {      public static void main(Stri ...