VUE基本使用

//创建前调用this.currDate_fun()方法
created:function(){
            this.currDate_fun();
        },
mounted:function () {

},
  watch:{
            //出勤checkbox 出勤值 检查，一个为真，另外一个设置为false
            //tmp为singleIn_data的值变化
            singleIn_data:function (tmp) {
                if(tmp){
                    this.singleOut_data=false;
                }
                else{
                    this.singleIn_data=false;
                    this.singleOut_data=true;
                }
            },

            //出勤checkbox 请假值 检查，一个为真，另外一个设置为false
            singleOut_data:function (tmp) {
                if(tmp){
                    this.singleIn_data=false;
                }
                else{
                    this.singleIn_data=true;
                    this.singleOut_data=false;
                }
            }
  },

1、HTML页面调用，Username为Vue模板的data数据

//HTML
规格：{{Username}}

//vue JS
 data :{
            Username:''
        },

2、绑定

<div v-model.trim="Username">
//currDate_data为data里的数据
<mu-list-item :title="'出勤日期：'+(currDate_data) +  '填报人员：TT'"></mu-list-item>
//
 data :{
            currDate_data:''
        },

3、

<div v-if="username==='T1'">

4、

this.tmp = (val==='')?'A':'B'

5、在标签上循环输出，list为data里的数组

 <template v-for="(item, index) in userList_data">
<template v-for="item in list">
      <mu-list-item :title="item"/>
      <mu-divider/>
</template>
//vue JS
 data :{
            list:['item1','item2','item3','item4','item5','item6']
 },