v-for

当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。

.
v-for 给了两个参数key和index，但是这里需要对遍历的数据区别对待。遍历的数据包括数组和对象，但是在数组下是没有key值的，而在对象下可以得到key，可以显示出来。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
.
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。

<.my-component v-for=”item in items” :key=”item.id”>
<./my-component>

用v-for实现简单九九乘法表

 <template>
     <div id="app">
         <div v-for="n in 9" :key="n.id">
            <b v-for="m in n" :key="m.id">
                {{m}}*{{n}}={{m*n}}
            </b>
         </div>
     </div>
</template>

截图：

1.短信60s倒计时

代码实现 :

 a)html结构

<template>
    <div class="buttonItem">
        <input v-model="vercode" type="text" placeholder="输入验证码">
        <div class="red sendCode" @click="sendMessage">{{btnText}}</div>
    </div>
</template>

b)样式

<style scoped lang="scss" rel="stylesheet/scss">
    .buttonItem{
        margin:15px 10px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        border:1px solid #ddd;
        input{
            height: 45px;
            font-size: 1rem;
            padding-left:10px;
            border:0;
            outline: none;
        }
        .sendCode{
            border: 0;
            outline: none;
            background-color: #fff;
            cursor: pointer;
        }
    }

</style>

c)逻辑

<script>
    export default{
        name:'buttonItem',
        data(){
            return{
                vercode:'',
                btnDisabled:false,
                btnText:'获取验证码'
            }
        },
        methods:{
            sendMessage(){
                if(this.btnDisabled){
                    return;
                }
                this.getSecond(60);
            },
            //发送验证码
            getSecond(wait){
                let _this=this;
                let _wait = wait;
                if(wait == 0) {
                    this.btnDisabled=false;
                    this.btnText="获取验证码"
                    wait = _wait;
                } else {
                    this.btnDisabled=true;
                    this.btnText="验证码(" + wait + "s)"
                    wait--;
                    setTimeout(function() {
                            _this.getSecond(wait);
                        },
                        1000);
                }
            }
        }
    }
</script>

效果如下：

2.秒杀倒计时

代码如下：

a)html结构

<template>
    <div class="addcountdown"
         :style="{'background-image':curdata.config.bgType==2?'url('+curdata.config.url+')':'','background-color':curdata.config.bgType==1?curdata.config.bgcolor:''}">
        <p v-if="!isStart" :style="{color:curdata.config.titleColor}">距开始还剩
            <span>{{day}}</span> 天 <span>{{hours}}</span> 时 <span>{{minut}}</span> 分 <span>{{second}}</span> 秒  </p>
        <p v-if="isStart&&!isEnd" :style="{color:curdata.config.titleColor}">距结束还剩
            <span>{{day}}</span> 天 <span>{{hours}}</span> 时 <span>{{minut}}</span> 分 <span>{{second}}</span> 秒</p>
        <p v-if="isEnd" style="color:red">活动已结束</p>
    </div>
</template>

b)css样式

<style scoped lang="scss" rel="stylesheet/scss">
    .addcountdown {
        background-position: center;
        background-size: cover;
        p {
            margin: 0;
            padding: 10px;
            span {
                color: red;
                font-weight: bold;
                font-size: 1.1rem;
            }
        }
    }
</style>

c)逻辑

import {SecondToDate} from '@/utils/auth';
    export default{
        name: 'addCountDown',
        props: {
            curdata: {
                type: Object,
                default: null
            },
            time: {
                type: Array,
                default: null
            }
        },
        data(){
            return {
                isStart: false,
                isEnd: false,
                curTimer: null,
                day: '',
                hours: '',
                minut: '',
                second: ''
            }
        },
        watch: {
            time(){
                if (this.time) {
                    clearInterval(this.curTimer)
                    this.initTime();
                }
            },
            curdata(){
                if (this.time) {
                    clearInterval(this.curTimer)
                    this.initTime();
                }
            }
        },
        created(){
            if (this.time) {
                clearInterval(this.curTimer)
                this.initTime();
            }
        },
        methods: {
            initTime(){
                if (this.time) {
                    if (this.time[0] - new Date().getTime() > 0) {
                        this.isStart = false;
                        this.isEnd = false;
                    } else {
                        this.isStart = true;
                        if (this.time[1] - new Date().getTime() > 0) {
                            this.isEnd = false;
                        } else {
                            this.isEnd = true;
                        }
                    }

                    let _this = this;

                    if (this.isStart && !this.isEnd) {
                        //开始还未结束
                        if (_this.time[1] - new Date().getTime() > 0) {
                            _this.curTimer = setInterval(() => {
                                _this.curTime = SecondToDate(_this.time[1]);
                                _this.initFormate(_this.curTime);
                            }, 1000)
                        }
                    } else if (!this.isStart) {
                        if (_this.time[0] - new Date().getTime() > 0) {
                            _this.curTimer = setInterval(() => {
                                _this.curTime = SecondToDate(_this.time[0]);
                                _this.initFormate(_this.curTime);
                            }, 1000)
                        }
                    }
                }


            },
            initFormate(curTime){
                if (curTime.indexOf('天') != -1) {
                    this.day = curTime.split('天')[0];
                    this.hours = curTime.split('天')[1].split(':')[0];
                    this.minut = curTime.split('天')[1].split(':')[1];
                    this.second = curTime.split('天')[1].split(':')[2];
                } else {
                    this.day = '00';
                    this.hours = curTime.split(':')[0];
                    this.minut = curTime.split(':')[1];
                    this.second = curTime.split(':')[2];
                }
            }
        }
    }

SecondToDate方法===》将时间戳格式转换为  __天__:__:__格式

代码如下：

export function SecondToDate(msd) {
    let curTime = msd - new Date().getTime();
    var time = curTime / 1000;
    if (null != time && "" != time) {
        if (time > 60 && time < 60 * 60) {
            time = parseInt(time / 60.0) + ":" + parseInt((parseFloat(time / 60.0) -
                    parseInt(time / 60.0)) * 60);
        }
        else if (time >= 60 * 60 && time < 60 * 60 * 24) {
            time = parseInt(time / 3600.0) + ":" + parseInt((parseFloat(time / 3600.0) -
                    parseInt(time / 3600.0)) * 60) + ":" +
                parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                    parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
        } else if (time >= 60 * 60 * 24) {
            time = parseInt(time / 3600.0 / 24) + "天" + parseInt((parseFloat(time / 3600.0 / 24) -
                    parseInt(time / 3600.0 / 24)) * 24) + ":" + parseInt((parseFloat(time / 3600.0) -
                    parseInt(time / 3600.0)) * 60) + ":" +
                parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                    parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60);
        }
        else {
            time = parseInt(time);
        }
    }
    let curtime = '';

    if (time.indexOf('天') == -1) {
        curtime = time.split(':');
    } else {
        curtime = time.split('天')[1].split(':');
    }

    let curArr = '';
    for (let a = 0; a < curtime.length; a++) {
        let item = curtime[a];
        if (item < 10) {
            item = '0' + item;
        }
        if (a < curtime.length - 1) {
            curArr += item + ':';
        } else {
            curArr += item;
        }

    }

    if (time.indexOf('天') != -1) {
        curArr = time.split('天')[0] + '天' + curArr;
        if (time.split('天')[0] < 10) {
            curArr = '0' + curArr;
        }
    }


    return curArr;

}

效果如下：

3.日期星期时间显示

代码如下：

a)html结构

<div class="timeBox">
            <div class="timeDate">
                <div>{{curTime.getDay() | filterDate}}</div>
                <div><span class="bigFont">{{curTime.getFullYear()}}</span>年{{curTime.getMonth()+1<10?'0'+(curTime.getMonth()+1):(curTime.getMonth()+1)}}月{{curTime.getDate()<10?'0'+curTime.getDate():curTime.getDate()}}日</div>
            </div>
            <div class="timeBox">{{curTime.getHours()<10?'0'+curTime.getHours():curTime.getHours()}}:{{curTime.getMinutes()<10?'0'+curTime.getMinutes():curTime.getMinutes()}}</div>
        </div>

b)css样式

 .timeBox {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 1;
            .timeDate {
                width: 150px;
                padding: 10px 5px;
                background-color:$text-green-color;
                color: #fff;
                .bigFont {
                    font-size: 20px;
                }
            }
            .timeBox {
                color:$text-green-color;
                border: 1px solid #ccc;
                font-size: 35px;
                font-weight: bold;
                padding: 9.5px 5px;
            }
        }

c)逻辑

      data(){
            return {
                curTime:new Date()
            }
        },
        filters:{
            filterDate(val){
                const arr={
                    '0':'星期天',
                    '1':'星期一',
                    '2':'星期二',
                    '3':'星期三',
                    '4':'星期四',
                    '5':'星期五',
                    '6':'星期六',
                }

                return arr[val];
            }
        },
        mounted: function () {
            let _this=this;
            this.$nextTick(function () {
                setInterval(()=>{
                    _this.curTime=new Date();
                }, 1000*60);
            })
        },

效果如下：