Element框架下的开发实记

发表于 | 分类于

动态绑定

动态绑定在Vue中是非常常用的，这里的笔记方便查询，更多。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1.绑定HTML属性
<p :class="stateCode ? 'success': 'error'">
    <i :class="stateCode ? 'el-icon-success' : 'el-icon-warning'"></i>
    {{mes}}
</p>

//2.绑定CSS样式
<span v-bind:style="{ display: timeRestDisplay}">
    {{timeRest}}<i class="el-icon-refresh-right"  />
</span>

//3.同时绑定多个方法事件
<el-button 
    type="primary" 
    @click="countDownButton();sendRequestForData()" 
    v-bind:class="{ disabled: !canClick }"
>
    {{content1}}
</el-button>

时间选择器组件

Vue框架下的时间选择器vue-datepicker有一个轻量级的包vue-datapicker-local，都可以使用。而Element框架下也有DatePicker组件。用法自己查Element 时间选择器组件。

单文件组件复用

在主文件中import单文件组件，然后在<template>中随意调用，可以传入不同的参数，如下图所示。

控制元素显示隐藏

善用v-show属性：

1
2
3
4
5
<el-form-item>
        <el-button type="primary" @click="getDataState" v-show="msg == 'data'? 'ture' : ''">爬赛事</el-button>
        <el-button type="primary" @click="getScoreState" v-show="msg == 'score'? 'ture' : ''">爬赛果</el-button>
        <el-button type="primary" @click="stopCatching">Stop</el-button>
      </el-form-item>