最近閑的無聊,想在VUE中用dom對象操作一個時間的選擇預約,可供自己和大家參考學習,廢話不多說!可以複制下方的代碼:在菜鳥教程上測試檢視效果:https://www.runoob.com/try/try.php?filename=vue3-hw
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試執行個體 - 菜鳥教程(YOLE)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1 class="addDbSource-alert" ref="addAlert1">site : {{site}}</h1>
<h1 @click="showAddAlert">{{btn}}</h1>
<div v-for="(h,index1) in hour" style="width: 1200rpx;">
<div v-for="(m,index2) in minute" class="time_box" ref="{{h}}_{{m}}">
{{h}}:{{m}}
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "我會被改變顔色和背景色",
btn: "點我觸發事件",
hour: ["00", "01"],//小時
minute: ["00", "15", "30", "45"],//分鐘
letters:["a","b"],//辨別
datas:{a00_00:true,a00_15:false,a00_30:false,a00_45:true,
b01_00:true,b01_15:false,b01_30:false,b01_45:true}//改時間的判斷值
},
methods: {
showAddAlert(){
//改變字型顔色
this.$refs.addAlert1.style.color = "#FFF";
//改變背景顔色
this.$refs.addAlert1.style.backgroundColor = "#F00";
//綁定單擊事件
this.$refs.addAlert1.addEventListener('click',function(){
alert("hello wrold");
},false)
//擷取所有元素
var array_list=this.$refs;
//console.log(array_list);
//循環元素
for(var key in array_list){
//找到我們需要的元素
if(key=="{{h}}_{{m}}"){
var a =array_list[key];//存儲臨時變量
//console.log(a);
var num_= 0;//定義一個存儲循環 letters 的下标變量;
for(var i=0;i<a.length;i++){//循環我們需要的元素
var name=a[i].innerText.replace(':','_');//特殊處理,友善我們識别datas内的資料
//console.log(num_)
//以下是動态綁定
console.log(this.letters[num_],name);
var lettersName=(this.letters[num_] + name);//得到 如: a00_00 的資料
console.log(this.datas[lettersName]);//取到datas中的資料
if(!this.datas[lettersName]){//判斷true | false 分别處理
a[i].style.color = "#FFF";//字型顔色改成白色
a[i].style.backgroundColor = "#F00";//背景色改成紅色
a[i].addEventListener('click',function(){//綁定單擊事件
alert("不可以預約");
},false)
}else{
a[i].addEventListener('click',function(){
alert("可以預約的啦!");
},false)
}
if((i+1)%this.minute.length==0){//每4次num_累計+1
num_++;
}
}
break;//結束,跳出循環
}
}
}
}
})
</script>
</body>
<style>
.time_box {
width: 50px;
height: 50px;
margin: 10px auto;
border: 1px solid #00F;
text-align: center;
line-height: 46px;
}
</style>
</html>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)