所做效果预览:

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. Junit5中实现参数化测试

    从Junit5开始,对参数化测试支持进行了大幅度的改进和提升.下面我们就一起来详细看看Junit5参数化测试的方法. 部署和依赖 和Junit4相比,Junit5框架更多在向测试平台演进.其核心组成也 ...

  2. c# 基于RTMP推流 PC+移动端 拉流播放

    网上关于直播相关的文章很多,但是讲解还是不够系统,对于刚刚接触直播开发的朋友实施起来会浪费不少时间.下面结合我自己的经验, 介绍一下直播方面的实战经验. 分成两个部分 第一部分是标题中介绍的基于RTM ...

  3. java 单链表反转

    最近与人瞎聊,聊到各大厂的面试题,其中有一个就是用java实现单链表反转.闲来无事,决定就这个问题进行一番尝试. 1.准备链表 准备一个由DataNode组成的单向链表,DataNode如下: pub ...

  4. 视频质量评估 之 VMAF

    VMAF 方法: 基本想法: 面对不同特征的源内容.失真类型,以及扭曲程度,每个基本指标各有优劣.通过使用机器学习算法(支持向量机(Support Vector Machine,SVM)回归因子)将基 ...

  5. jquery的浪漫(跑马灯 + 雪花飘落)

    jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 ...

  6. [AIR] NativeExtension在IOS下的开发实例 --- Flex库项目的创建(二)

    来源:http://bbs.9ria.com/thread-102038-1-1.html 上一章,我已经介绍了如果创建IOS库文件,并定义了两个方法ShowIconBadageNumber和Init ...

  7. 整合91平台接入的ANE

    来源:http://www.swfdiy.com/?p=1328 91平台接入的SDK只有objectC版和java版, 现在如果要在AIR里使用SDK,只能编写ANE整合进来. 91SDK = 几个 ...

  8. 如何在backoffice里创建Hybris image container以及分配给product

    登录backoffice,在media container视图点击新建按钮: Catalog选择Product Catalog: 在Properties界面,可以选择media实例放入该contain ...

  9. Cephfs 部署 创建 metadata 池 data池

    上一次部署了ceph分布式存储,接下来我们部署ceph的文件系统.Ceph文件系统至少需要两个RADOS池,一个用于数据,一个用于元数据. 创建metadata 池 后面数字表示 PG 和pgp数 c ...

  10. typescript 模块

    模块:模块可以帮助开发者将代码分割为重用的单元.开发者可以自己决定将模块中的哪些资源(类,方法,变量)暴露出去供外部使用,哪些资源只在模块内使用 在ts里面,一个文件就是一个模块,并没有什么特殊的标识 ...