test004.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<!--
1.计算属性
    在在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果
2.监视属性:
    通过vm对象的$watch()或watch配置来监视指定的属性
    当属性变化时,回调函数自动调用,在函数内部进行计算
3.计算属性高级
    通过getter/setter实现对数据的显示和监视
    计算属性存在缓存,多次读取只执行一次getter计算

    getter:属性的get方法
    setter:属性的set方法
-->
<div id="demo">
    姓: <input type="text" placeholder="First Name" v-model="firstname"><br>
    名: <input type="text" placeholder="Last Name" v-model="lastname"><br>
    姓名1(单向):<input type="text" placeholder="Full Name1" v-model="fullname1"><br>
    姓名2(单向):<input type="text" placeholder="Full Name2" v-model="fullname2"><br>
    姓名3(双向):<input type="text" placeholder="Full Name3" v-model="fullname3"><br>
    <!--按理说应该执行fullname1()4遍,但观察console执行了一遍,第一遍肯定执行,缓存到了容器中了-->
    <!--fullname1作为k,值作为value,用的时候先从缓存中取,取不到再去调函数-->
    <p>{{fullname1}}</p>
    <p>{{fullname1}}</p>
    <p>{{fullname1}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
   const vm= new Vue({
        el:'#demo',
        data:{
            firstname:'赵',
            lastname:'云',
            fullname2:'赵 云'
        },
        computed:{
            //1.什么时候执行:初始化显示执行/相关的data的属性数据发生变化
            //2.用来做什么?计算并返回当前属性的值
            fullname1(){//计算属性的一个方法,方法的返回值作为属性值
                console.log('fullname1')
                //this就是vm对象
                return this.firstname+''+this.lastname
            },
            fullname3:{
                //回调函数  计算并返回当前属性的值
                //回调函数满足三个条件:1.你定义的,2.你没有调用,3.但最终他执行了
                //关于回调函数:1.什么时候调用?2.用来做什么?
                //1.当需要读取当前属性值时回调2.根据相关的数据计算并返回当前属性的值
                get(){
                    return this.firstname+''+this.lastname
                },
                //回调函数,监视当前属性值的变化,当属性值发生改变时调用,更新相关的属性数据
                set(value){//value就是fullname3的最新属性值
                    const names=value.split(' ')
                    this.firstname=names[0]
                    this.lastname=names[1]
                }
            }

        },
        watch:{//配置监视属性
            //里面是个回调函数function
            //如果不需要以前的值了,可以这样写function(newVal)
            firstname: function(value){//firstname发生了 变化,我们需要去修改fullname1
                console.log(this)
                //this就是vm对象
                this.fullname2=value+' '+this.lastname
            }
        }
    })

    //所有vm的方法都以$开头
    vm.$watch('lastname',function(value){
        //更新fullname2
        this.fullname2=this.firstname+' '+value
    })
</script>
</body>
</html>
2.页面截图

(尚006)Vue计算属性之set与get的更多相关文章

  1. (尚004)Vue计算属性之基本使用和监视

    所做效果预览: test004.html <!DOCTYPE html><html lang="en"><head> <meta char ...

  2. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  3. 在做vue计算属性，v-for处理数组时遇到的一个bug

    bug: You may have an infinite update loop in a component render function 无限循环 需要处理的数组(在 ** ssq **里): ...

  4. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  5. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  9. 第三节：Vue计算属性

    计算属性就是当其依赖的属性的值发生变化的时候,这个属性的值就会自动更新. 例子: <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. REST Framework接口规范

    REST Framework接口规范 一 .发展及其背景介绍 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备-).因此,必须有一种统一的 ...

  2. Spring主要用到两种设计模式

    Spring主要用到两种设计模式 1.工厂模式 Spring容器就是实例化和管理全部Bean的工厂. 工厂模式可以将Java对象的调用者从被调用者的实现逻辑中分离出来. 调用者只关心被调用者必须满足的 ...

  3. 2.5_Database Interface ODBC数据源及案例

    分类 用户数据源 用户创建的数据源,称为“用户数据源”.此时只有创建者才能使用,并且只能在所定义的机器上运行.任何用户都不能使用其他用户创建的用户数据源. 系统数据源 所有用户在Windows下以服务 ...

  4. gitlab用户登录与AD域用户集成

    ---恢复内容开始--- 编辑gitlab.rb文件 sudo vi /etc/gitlab/gitlab.rb 下图是我编辑的内容示例(仅供参考): 编辑以下内容: gitlab_rails['ld ...

  5. MySQL的ERROR 1205错误分析

    一.错误发生及原因猜测 1.错误发生 在删除 t_user 表的一条数据时,Navicat 发生长时间的无响应,然后弹出一个对话框,提示:ERROR 1205: Lock wait timeout e ...

  6. Windows系统中环境变量不展开的问题

    Windows系统中环境变量不展开的问题 问题现象:Windows.System32等系统目录里命令,无法通过Path搜索路径来执行.查看Path环境变量结果如下: D:\>echo %Path ...

  7. Java 之 web 相关概念

    一.软件架构 1.C/S:客户端/服务器端 2.B/S:浏览器/服务器端(目前常用) 二.网络资源 1.静态资源 静态资源:所有用户访问后,得到的结果都是一样的,称为静态资源,静态资源可以直接被浏览器 ...

  8. C++之同名覆盖、多态

    一.同名覆盖引发的问题 父子间的赋值兼容--子类对象可以当作父类对象使用(兼容性) 1.子类对象可以直接赋值给父类对象 2.子类对象可以直接初始化父类对象 3.父类指针可以指向子类对象 4.父类引用可 ...

  9. 01-HTML基本介绍

    本篇主要介绍HTML相关标签的使用,以及其常用标签的作用等介绍. 一.HTML的介绍 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是 ...

  10. my.cnf参数说明

    MySQL 5.7数据库参数优化 连接相关参数 max_connections:允许客户端并发连接的最大数量,默认值是151,一般将该参数设置为500-2000 max_connect_errors: ...