所做效果预览:

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. 【LeetCode】 #9：回文数 C语言

    目录 题目 思路 初步想法 进一步想法 最后想法 总结 最近打算练习写代码的能力,所以从简单题开始做. 大部分还是用C语言来解决. @(解法) 题目 判断一个整数是否是回文数.回文数是指正序(从左向右 ...

  2. 4. Spark SQL数据源

    4.1 通用加载/保存方法 4.1.1手动指定选项 Spark SQL的DataFrame接口支持多种数据源的操作.一个DataFrame可以进行RDDs方式的操作,也可以被注册为临时表.把DataF ...

  3. Python爬虫b站视频弹幕并生成词云图分析

    爬虫:requests,beautifulsoup 词云:wordcloud,jieba 代码加注释: # -*- coding: utf-8 -*- import xlrd#读取excel impo ...

  4. Luogu4069 SDOI2016 游戏 树链剖分、李超线段树

    传送门 每一次加的是一个一次函数,一些呈一次函数的线段求最小值,显然用到李超线段树. 然后把维护序列的李超线段树强行上树,就直接套上树剖就可以了. 至于李超树如何区间查询,因为一次函数线段的最小值一定 ...

  5. OI数学汇总

    最前面:\(\LaTeX\)可能需要加载一会,请耐心等待o~ 前言 数学在\(\text{OI}\)中十分重要.其中大多都是数论. 什么是数论? \[ 研究整数的理论 --zzq \] 本文包含所有侧 ...

  6. 广度优先搜索（BFS）思路及算法分析

    1.算法用途: 是一种图像搜索演算法.用于遍历图中的节点,有些类似于树的深度优先遍历.这里唯一的问题是,与树不同,图形可能包含循环,因此我们可能会再次来到同一节点. 2.主要思想: 主要借助一个队列. ...

  7. SAP云平台上的SSO Principal Propagation设置

    我今天试图使用SAP云平台的SAP WebIDE Fullstack时,发现打不开, 遇到如下错误信息: You are not authorized to work with SAP Web IDE ...

  8. Spark 宽窄依赖和stage的划分

    窄依赖 父RDD和子RDD partition之间的关系是一对一的,或者父RDD一个partition只对应一个子RDD的partition情况下的父RDD和子RDD partition关系是多对一的 ...

  9. 关于视频解码总结--JavaCV

    关于视频解码的所收集资料进行总结 前言:内容不全,但有一定参考性! 关于java后台视频解码 进行js将视频每秒或更低裁截传输,后台使用最优方案(自己感觉): JavaCV(点击进入) 缺点:整合工具 ...

  10. Linux磁盘管理——MBR 与 GPT

    硬件设备在Linux中文件名 如今IDE 磁盘几乎被淘汰,市面上最常见的磁盘就是SATA和SAS.个人计算机主要是SATA.很多Linux发行版下都将IDE磁盘文件名也都被仿真成 /dev/sd[a- ...