所做效果预览:

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. ssh常用操作

    介绍ssh.sshpass.scp等linux下远程操作常用的命令 ssh 通过终端远程linux服务器的常用命令 ssh root@192.168.1.100 #以root用户链接到目标服务器,连通 ...

  2. 缺陷的背后（三）---mysql之sql_mode为空的陷阱

    导语 mysql服务器可以在不同的sql_mode模式下运行,并且可以根据sql_mode系统变量的值,为不同的客户机应用不同的模式.sql_mode会影响mysql支持的sql语法,并且会执行数据验 ...

  3. Java文件字符流

    1.字符编码(Character encoding)和编码集(Character set) 字符编码(Character encoding)是将字符转为字节或字节数组的过程. 字符集(Characte ...

  4. Jsp页面显示时间:<fmt>标签问题

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt"%> <%@ taglib ...

  5. 【面试突击】- SpringMVC那些事（一）

    1.什么是Spring MVC ?简单介绍下你对springMVC的理解? Spring MVC是一个基于MVC架构的用来简化web应用程序开发的应用开发框架,它是Spring的一个模块,无需中间整合 ...

  6. 【开发笔记】- MD5加密

    主要用于对用户密码的加密,保护用户账户安全: /** * @author shenruihai * */ import java.security.MessageDigest; import org. ...

  7. React学习：状态(State) 和 属性(Props)

    State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...

  8. 分布式系统session一致性解决方案

    在单机系统中,不存在Session共享问题,但是在分布式系统中,我们必须实现session共享机制,使得多台应用服务器之间会话统一,如果不进行Session共享会出现数据不一致,比如:会导致请求落到不 ...

  9. zubax_gnss简介

    参考:https://docs.zubax.com/zubax_gnss 目录结构 bootloader:主要功能是升级application.加载application和初始化application ...

  10. Linux磁盘管理——Ext2文件系统

    前言 通常而言,对于一块新磁盘我们不是直接使用,而是先分区,分区完毕后格式化,格式化后OS才能使用这个文件系统.分区可能会涉及到MBR和GPT问题.至于格式化和文件系统又有什么关系? 这里的格式化指的 ...