[JavaScript知识库]vue案例

1、佛系挑选

引用：不知道中午应该吃什么？用vue写个实例帮我们抉择吧 - 掘金 (juejin.cn)

1、搭建框架

?需要：

1、收集用输入的随机选择的个数--v-model 进行绑定

2、收集用户输入的数据--监听回车事件

3、点击按钮，开始随机选择，并将结果进行显示

?textarea输入的数据，按照空格分行之后，怎么获取每个元素：this.inputdata.split('\n')

从一个数组中，随机选择一个或者多个元素的方法：

1、var item = items[Math.floor(Math.random()*items.length)];

2、function getRandomArrayElements(arr, count) {
? ? var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
? ? while (i-- > min) {
? ? ? ? index = Math.floor((i + 1) * Math.random());
? ? ? ? temp = shuffled[index];
? ? ? ? shuffled[index] = shuffled[i];
? ? ? ? shuffled[i] = temp;
? ? }
? ? return shuffled.slice(min);
}

<template>
  <div class="content">
    <h1>随机选择器</h1>
 <p>选择个数：<input type="text" placeholder="请输入需要选择的个数" v-model="chosenumber"></p>
 <button class="start" @click="chosestart">佛系选择开始</button>
 <div v-show="inputdata==''">请输入数据</div>
 <div v-show="chosenumber>datas.length">选择个数超过总的选择</div>
 <div class="input"><div>输入框:</div>
 <textarea name="" id="" cols="30" rows="10" placeholder="输入数据以回车分割" v-model="inputdata" ></textarea></div>

<div class="resultshow">
    <div>最终结果显示：</div>
    <ul>
    <li v-for="(item) in val" :key="item">{{item}}</li>
 </ul>
</div>
  </div>
</template>

<script>
export default {
    name: 'randomchose',
    data() {
        return {
            chosenumber: '0',
            inputdata: '',
            val: [],
            getval(arr,count) {
                var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index
                while (i-- > min) {
                    index = Math.floor((i + 1) * Math.random())
                    temp = shuffled[index]
                    shuffled[index] = shuffled[i]
                    shuffled[i]=temp
                }
return shuffled.slice(min)
            }
        }         
    },
    computed: {
        datas() {
        return this.inputdata.split('\n')
    }
},
methods: {
    chosestart() {
        this.val = this.getval(this.datas, this.chosenumber)
        }
    }
}
</script>

<style scope>
.content{
  width:600px;
  height:auto;

margin:0 auto;
position:relative;
text-align: center;
}
.input{
  position: absolute;
  left:0px;
  width:270px;

}
.resultshow{
  position: absolute;
  right:0px;
  width:270px;

}
.start{
    width:160px;
    height: 40px;
    background-color:beige;
    border: none;
    color:blue
}
textarea{resize:none
}
li{
    padding:0px;
    text-align: left

}
</style>

关键：先将用户输入的数据，利用回车作为切割符，转换为数组后，再利用Math.random产生最忌数，来获取数组的下标，再将挑选出来的数据进行显示

2、人生计时器

怎么将date类型的input标签绑v-model的value

?怎么将date类型的input的时间转换为时间戳

?计算时间戳的时候有点迷糊

<template>
  <div class="big">
    <h2 style="text-align:center;">人生计时器</h2>
<h3>选择您的出生日期</h3><br>
    <input type="date" v-model="borndate"><br>
    <button class="start" @click="start">开始查询</button><br>
    <h4 v-show="borndate==''">还未输入出生日期</h4>
    <progress max="100" :value="pro"></progress>
  </div>
</template>

<script>
export default {
    name:'life',
    data() {
        return {
            borndate: '',
            pro:'10'
        }
},
            methods: {
                start() {
                    let date=new Date(this.borndate)
                    var timestamp1 = date.getTime()
                    let totaltimestamp =  31536000000 *80
                    var timestampnow = new Date().getTime()
                    var gaptime = timestampnow - timestamp1
                    this.pro =(totaltimestamp - gaptime) * 100 / totaltimestamp
console.log(this.pro);

        }
    }
}
</script>

<style>
.big{
    width:600px;
    height:600px;
    margin:0 auto;
    font-size:20px;
}
.start{
    width:100px;
    height:30px;
background-color:beige;
border:none
}
input{
    height: 50px;
    font-size:20px;
    margin-bottom: 10px;
}
</style>

?