<!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. SessionFactory是线程安全的吗？Session是线程安全的吗？两个线程能共享一个Session吗？

    (1)SessionFactory对应Hibernate的一个数据存储的概念,它是线程安全的,可以被多个线程并发访问.SessionFactory一般只会在启动的时候构建.对于应用程序,最好将Sess ...

  2. 如何限制只有某些IP才能使用Tomcat Manager

    只有指定的主机或IP地址才可以访问部署在Tomcat下的应用.Tomcat提供了两个参数供你配置:RemoteHostValve 和RemoteAddrValve,前者用于限制主机名,后者用于限制IP ...

  3. linux IO模式以及select、poll、epoll详解

  4. ubuntu 搜狗输入法内存占用太多，卡顿不够处理办法

    1.  输入 free -m  查看是否内存不够导致卡顿 2. 输入  gnome-system-monitor 打开ubuntu 任务管理器 找到搜狗输入法结束进程 3. 完美解决

  5. 浏览器CSS兼容

    一.<important 在IE6及FF中的使用>.box1 {width:150px !important;} .box1 {width:250px;} !important是说这个设置 ...

  6. vue学习笔记（五）— 组件通信

    关于vue父子组件通信 作者:狐狸家的鱼 本文链接:vue组件通信 GitHub:sueRimn 如果组件是一个单页面,组件之间存在父子关系,数据传递就需要根据父子不同的地位使用不同的办法. 借助新建 ...

  7. Qt 样式表鼠标滑过按钮更改Text文本颜色

    QSS语法参考http://blog.csdn.net/liang19890820/article/details/51691212 Qt助手上也有比较详细的说明,选择器以及伪选择器,现在只是做个简单 ...

  8. 【leetcode】662. Maximum Width of Binary Tree

    题目如下: Given a binary tree, write a function to get the maximum width of the given tree. The width of ...

  9. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  10. [CSP-S模拟测试]:玄学题/c（数学）

    题目传送门(内部题40) 输入格式 第一行:两个正整数$n$.$m$. 输出格式 第一行:一个整数,代表式子的值. 样例 样例输入1: 4 5 样例输出1: 0样例输入2: 799 8278 样例输出 ...