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>

 

作为AI助手,我需要先声明一下:WebRTC技术是一种实时通信的技术,用于浏览器之间的音视频通话、屏幕共享等场景。而Vue是一种前端框架,用于构建用户界面。 因此,WebRTC和Vue并不是一种直接相关的技术,但是可以通过Vue来构建WebRTC应用的用户界面。 下面是一个简单的WebRTC Vue案例: 1. 安装Vue和WebRTC相关的库 ``` npm install vue webrtc-adapter vue-webrtc ``` 2. 在Vue组件中引入WebRTC组件 ```html <template> <div> <video ref="localVideo" autoplay muted></video> <video ref="remoteVideo" autoplay></video> <button @click="startCall">Start Call</button> <button @click="endCall">End Call</button> </div> </template> <script> import VueWebRTC from 'vue-webrtc' export default { name: 'WebRTCComponent', components: { VueWebRTC }, data () { return { localStream: null, remoteStream: null, isCalling: false } }, methods: { async startCall () { this.isCalling = true this.localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true }) this.$refs.localVideo.srcObject = this.localStream const rtcPeerConnection = new RTCPeerConnection({ iceServers: [ { urls: 'stun:stun.stunprotocol.org' } ] }) this.localStream.getTracks().forEach(track => rtcPeerConnection.addTrack(track, this.localStream)) rtcPeerConnection.addEventListener('icecandidate', event => { if (event.candidate) { // send ice candidate to remote peer } }) rtcPeerConnection.addEventListener('track', event => { this.remoteStream = event.streams[0] this.$refs.remoteVideo.srcObject = this.remoteStream }) // create offer and set local description const offer = await rtcPeerConnection.createOffer() await rtcPeerConnection.setLocalDescription(offer) // send offer to remote peer }, endCall () { // close peer connection and release stream resources this.isCalling = false this.localStream.getTracks().forEach(track => track.stop()) this.remoteStream.getTracks().forEach(track => track.stop()) const rtcPeerConnection = this.$refs.vueWebRTC.rtcPeerConnection if (rtcPeerConnection) { rtcPeerConnection.close() } } } } </script> ``` 3. 在Vue实例中使用WebRTC组件 ```js import Vue from 'vue' import WebRTCComponent from './WebRTCComponent.vue' new Vue({ el: '#app', components: { WebRTCComponent }, template: '<WebRTCComponent/>' }) ``` 在这个案例中,我们使用了vue-webrtc组件来简化WebRTC的使用。具体来说,我们在startCall方法中使用getUserMedia获取本地音视频流,创建RTCPeerConnection实例,并将本地流添加到peer connection中。然后,我们使用createOffer方法创建一个offer并将其设置为本地的SDP(Session Description Protocol)。最后,我们将offer发送给远程peer,并等待远程peer的answer。在answer到达之后,我们将其设置为远程SDP,并完成peer connection的建立。 需要注意的是,在实际应用中,我们需要处理各种事件,例如网络中断、peer connection失败等等。同时,我们还需要考虑如何安全地传输音视频流以及如何支持多人通话等场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一夕ξ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值