vue todos and maze

vue todos and maze
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

助記清單的實現

繫結style和class 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/uikit.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>TODOS</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/maze.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/moment-with-locales.js"></script>
</head>
<style>
.finish {
text-decoration: line-through;
font-weight: normal;
font-size: 20px;
font-style: italic;
background-color: lightgray;
margin: 0px;
}
.unfinish {
text-decoration: none;
font-weight: bold;
font-size: 22px;
font-style: normal;
background-color: deepskyblue;
margin: 0px;
}
</style>
<body>
<div id='myDiv' class="container" style="width: 800px;height: 600px">
<div class="" style="top:50%;position: relative;transform:  translateY(-50%);">
<to-do></to-do>
</div>
</div>
</body>
<template id='Card'>
<!--<div :style="delStyle">-->
<div :class="{finish:isFinished,unfinish:!isFinished}">
<input type="checkbox" v-model='isFinished' class="text-left">
<!--<span>id:{{id}}</span>-->
<span>
{{msg}}
<span class="text-right">
| {{time | dateFilter}}
</span>
</span>
<button type="button" class="close" @click='del' aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
</template>
<template id="to-do">
<div class="card text-center">
<div class="card-body">
<div class="card" style="margin: 10px">
<div class="card-body">
<h1>TODOS</h1>
<input type="text" @keyup.13='add_item' v-model="content" placeholder="請輸入內容,回車確認...">
</div>
</div>
<!--,key的作用是可以用來優化列表重排的速度。 key值一般要唯一,不然會導致排序錯亂。-->
<!--解決方法:給key增加一String或Number的值。-->
<div class="card" v-for='(it,index) in items' style="margin: 5px">
<div class="card-body" style="margin: 0px 0px;padding:0px">
<Card @del='del_card' :key="index" :id='index' :msg='it.msg' :time='it.time'>{{}}</Card>
</div>
</div>
</div>
</div>
</template>
<script>
Vue.component('Card', {
template: "#Card",
props: [
'id',//第幾個卡片
'msg',   //卡片顯示資訊
'time', //建立時間
],
data: function () {
return {
isFinished: false,   //是否完成
}
},
methods: {
del: function () {
console.log('card click'   this.id)
this.$emit('del', this.id)
},
finish: function () {
console.log('card finish:'   this.id)
}
},
watch: {
isFinished: function (newVal, oldVal) {
console.log('isFinished change')
}
},
computed: {
delStyle: function () {
if (this.isFinished) {
//完成的樣式
return {
'text-decoration': 'line-through',
'font-weight': 'normal',
'font-size': '20px',
'font-style': 'italic',
'background-color': 'lightgray',
'margin': '0px'
}
} else {
//未完成樣式
return {
'text-decoration': 'none',
'font-size': '22px',
'font-weight': 'bold',
'font-style': 'normal',
'background-color': 'deepskyblue',
'margin': '0px'
}
}
}
},
filters: {
dateFilter: function (val) {
console.log('dateFilter :'   val)
//將時間戳轉變為當地時間
return moment(Date.now()).locale('zh').calendar()
}
}
})
Vue.component('to-do', {
template: "#to-do",
data: function () {
return {
items: new Array(),    //資料陣列,每個資料項由內容和時間構成
content: '',     //儲存任務內容
}
},
methods: {
del_card: function (data) {
console.log('del_card : '   data)
console.log(this.items)
//splice(a,b)刪除陣列中下標為a,長度為b的一段
this.items.splice(parseInt(data), 1)
},
add_item: function () {
console.log('content:'   this.content)
if (this.content.length == 0)
return
//在尾部新增
//                this.items.push({
//                    msg: this.content,
//                    time: Date.now(),
//                })
//在開頭新增
this.items.unshift({
msg: this.content,
time: Date.now(),
})
this.content = ''
}
}
})
new Vue({
el: "#myDiv",
methods: {}
})
</script>
</html>

 

使用元件繪製迷宮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/uikit.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>迷宮尋路</title>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/bomb.js"></script>
</head>
<body>
<div id="myDiv" class="container">
<h1>Maze</h1>
rows:
<select v-model="row_num" >
<option>4</option>
<option>5</option>
<option>6</option>
</select>
cols:
<select v-model="col_num">
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<maze :row_num='row_num' :col_num='col_num' btn_class='btn' btn_style='width:50px;height:50px;'></maze>
</div>
</body>
<template id="bomb">
<div>
<div v-for='(i,key) in rows'>
<button v-for="(j,index) in cols" :class='btn_class' :style='btn_style'>{{key}},{{index}}</button>
</div>
row_num:{{row_num}}
rows:{{rows}}
{{rows.length}}
</div>
</template>
<script>
var colors = ['darkgray',   //0,平地顏色
'lightgray',    //1,普通顏色
'deepskyblue',         //3,標記顏色
'yellow',      //2,端點顏色
]
Vue.component('maze', {
template: "#bomb",
data: function () {
return {
rows: new Array(parseInt(this.row_num)),
cols: new Array(parseInt(this.col_num)),
}
},
props: ['row_num','col_num','btn_class','btn_style'],
methods: {
add: function () {
this.cnt  
}
},
watch: {
row_num: function (newVal, oldVal) {
console.log('r newVal:'   newVal)
this.rows = new Array(parseInt(this.row_num))
},
col_num:function (newVal,oldVal) {
console.log('c newVal:'   newVal)
this.cols = new Array(parseInt(this.col_num))
}
}
})
new Vue({
el: "#myDiv",
data:{
row_num:4,
col_num:4,
},
})
</script>
</html>

相關文章

程式語言 最新文章