淘先锋技术网

首页 1 2 3 4 5 6 7

----20190219-vue学习笔记4—

computed计算属性

直接做练习:
在这里插入图片描述
声明变量:

data(){
            return {
                surname1: '',//姓
                name1: '',//名
            }
        },

对文本框绑定变量:

请输入: 姓: <input type="text" v-model="surname1" > 名: <input type="text" v-model="name1" >

在文本输入姓和名,并将前后文本框的值组合在一起,现阶段有三种写法:
1、双向绑定:
直接将变量显示出来。

<lable >您的全名:{{surname1}}{{name1}}</lable>

在这里插入图片描述
2、调用函数:
在methods框架中,写一个方法,注意调用的时候,
格式是:{{function()}},有带括号。

methods: {
            link_name: function () {
                return this.surname1 + this.name1;
            }
        },
<div>函数方法:{{link_name()}}</div>

在这里插入图片描述
3、计算属性:
在computed框架中,写函数,直接调用,注意调用的时候,
格式是:{{function}},不带括号。

computed: {
            com_name_total: function () {
                return this.surname1 + this.name1;
            },
        }
<b>计算属性:{{com_name_total }}</b>

在这里插入图片描述

在computed 中的let命令

let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效
限制条件:
1、作用域只局限于当前代码块;
2、同一作用域下不能定义相同的变量。

用computed获取系统时间函数

computed: {
            com_name_total: function () {
                let mydate = new Date();    //Wed Feb 20 2019 23:27:00 GMT+0800 (中国标准时间)
                let year=mydate.getFullYear();//获取年
                let month=mydate.getMonth()+1;//获取月   +1,加1月 +2 加两月
                let date=mydate.getDate();//获取日
                let hh=mydate.getHours();//获取小时
                let mm=mydate.getMinutes();//获取分
                let ss=mydate.getSeconds();//获取毫秒
                let mmm=mydate.getMilliseconds();//
                console.log('当前时间:'+year + '年'+month+'月'+date+'日 ' +hh+':'+mm+':'+ss +' '+mmm
                );
//                let myyear = mydate.getFullYear();
                let myyear1=year+100;
                console.log(myyear1);

                return this.surname1 + this.name1;
            },
        }

效果如下:
在这里插入图片描述

watch监听器/侦听器

在vue中,使用watch 来响应数据的变化
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
在上面的练习中,改进下程序,增加记录操作次数:
在这里插入图片描述

在script框架里,增加wacth{},为了监听com_name_total方法的最后值的变化,并显示结果:
先声明变量

 data(){
  			fullname: 0, 
   },
 watch:{
            com_name_total:function () {   
                this.fullname= this.fullname+1;        
            }
        },

在这里插入图片描述
在这里插入图片描述

其中, com_name_total:function () 的写法里,隐藏最初的2个参数,
com_name_total:function (oldValue,newValue) { },
把2个参数标上,看下效果:
在这里插入图片描述

在这里插入图片描述