所做效果预览:

test004.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性和监视</title>
</head>
<body>
<!--
1.计算属性
    在在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果

-->
<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"><br>
</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:{
            //什么时候执行:初始化显示执行/相关的data的属性数据发生变化
            fullname1(){//计算属性的一个方法,方法的返回值作为属性值
                console.log('fullname1')
                //this就是vm对象
                return this.firstname+''+this.lastname
            }

        },
        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>
==================================================================================================================
通过对比发现计算属性优于监视

(尚004)Vue计算属性之基本使用和监视的更多相关文章

  1. (尚006)Vue计算属性之set与get

    test004.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  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实力的属性和方法

    生命周期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

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

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

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

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

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

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

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

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

随机推荐

  1. 【C语言】了解原码、反码、补码

    原码.反码.补码 在学习C语言的过程中,有遇到补码这个问题,当时感觉懂了,有貌似不是很懂:然后查了一些文档,整理了一番,以后忘记了可以再翻开这篇文档,查漏补缺吧! 原码 原码是指一个二进制数左边加上符 ...

  2. 在内网中 vue项目添加ECharts图表插件

    原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...

  3. Apach Shiro MD5密码加密过程（明文生成密码过程）详细解析

    前言: 最近再项目当中使用的ApachShiro安全框架,对于权限和服务器资源的保护都有一个很好的管理.前期主要参考的文章有 项目中设计密码的加盐处理以及二次加密问题,跟着断点 一步步揭开Apach ...

  4. Java线程读写锁

    排他锁和共享锁: 读写锁:既是排他锁,又是共享锁.读锁,共享锁,写锁:排他锁 读和读是不互斥的 import java.util.HashMap; import java.util.Map; impo ...

  5. Alfred神器使用手册【转】

    我曾经耗费巨大的精力,试图在计算机的使用效率上找到一条优化的捷径,一直以来都收效甚微.直到遇上 alfred,它强大的工作流机制,彻底解决了输入输出的痛点,极大的减少了程序之间的切换成本和重复按键成本 ...

  6. 关闭 OSX 10.11 SIP (System Integrity Protection) 功能

    关闭 OSX 10.11 SIP (System Integrity Protection) 功能 来源 https://cms.35g.tw/coding/%E9%97%9C%E9%96%89-os ...

  7. 从ghost映像.gho文件快速创建vmware虚拟机

    从ghost映像.gho文件快速创建vmware虚拟机 https://www.cnblogs.com/blog2018/p/8857146.html ghost文件.gho和vmware文件都是磁盘 ...

  8. 2019北航OO第三单元作业总结

    1.梳理JML语言的理论基础.应用工具链情况 JML基础理论: JML(Java Modeling Language)是用于对Java程序进行规格化设计的一种表示语言.JML是一种行为接口规格语言,基 ...

  9. CentOS下安装mysql-server提示No package mysql-server avaliable

    出现这个原因是CentOS使用mariadb-server代替掉了mysql-server,因此如果想使用mysql-server需要先更新仓库地址,使用以下命令: wget http://repo. ...

  10. [转]关于ORA-00979 不是 GROUP BY 表达式错误的解释

    转自:https://www.cnblogs.com/vigarbuaa/archive/2012/06/25/2561225.html ORA-00979 不是 GROUP BY 表达式”这个错误, ...