使ç¨Vueæ¡æ¶æ¥ååçå表çæ·»å å é¤åå ³é®åæç´¢
åè¿å
¥çæ¶åå
æ å¯ä»¥ç´æ¥éä¸æç´¢å
³é®å
æåæ·»å idåname
éè¿å
³é®è¯é©¬ï¼å¯ä»¥å¯¹å
容è¿è¡çé
ç¹å»å¯¹åºçåçè¿è¡å é¤ï¼å é¤æå
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="Vue.min.js"></script>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title" style="text-align:center">æ·»å åç</h3>
</div>
<div class="panel-body form-inline">
<label style="margin-left:5px;">
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label style="margin-left:5px;">
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter='add'>
</label>
<!--å½æ°å äºå°æ¬å·æ¯ä¸ºäºä¼ å-->
<input type="button" value="æ·»å " class="btn btn-primay" style="margin-left:5px;" @click="add()">
<label style="margin-left:5px;">
æç´¢å称å
³é®å:
<input type="text" class="form-control" v-model="keywords" v-focus>
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped" style="margin-top:10px;">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in search(keywords)" key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime|dataFormat('')}}</td>
<td>
<a href="" @click.prevent="del(item.id)">å é¤</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
Vue.filter('dataFormat', function (dateStr, pattern = "") {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
//var m = (dt.getMonth() + 1).toString().padStart(2, '0')
//è¡¥0çæ¹æ³ï¼å 为çæ¬é®é¢ç¨ä¸äºpadstartæ¹æ³
var d = dt.getDate()
if (pattern.toLowerCase() === "yyyy-mm-dd") {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss} `
}
})
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
keywords: "",
list: [{
id: 1,
name: 'å¥é©°',
ctime: new Date()
},
{
id: 2,
name: 'å®é©¬',
ctime: new Date()
},
]
},
methods: {
add() {
var car = {
id: this.id,
name: this.name,
ctime: new Date()
}
this.list.push(car)
this.id = this.name = ""
},
del(id) {
this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
return true;
}
})
},
search(keywords) {
// var newList = []
// this.list.forEach(item => {
// if (item.name.indexOf(keywords) != -1) {
// newList.push(item)
// }
// })
// return newList
return this.list.filter(item => {
if (item.name.includes(keywords)) {
return item
}
})
}
}
})
</script>
</body>
</html>
æ·»å å¨ç»ææç代ç
ï¼å 为åè½ç±»ä¼¼å°±ä¸éæ°åä¸ç¯æ°çå客äºï¼
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="Vue.min.js"></script>
<style>
li {
border: 1px dashed #999999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
li:hover {
background-color: aquamarine;
transition: all 0.8s ease;
}
.v-move {
transition: all 0.6s ease;
}
.v-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label>
Id:
<input type="text" v-model="id">
</label>
<label>
Name:
<input type="text" v-model="name">
</label>
<input type="button" value="æ·»å " @click="add">
</div>
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}---{{item.name}}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
list: [{
id: 1,
name: 'èµµé«'
},
{
id: 2,
name: '秦桧'
},
{
id: 3,
name: '严嵩'
},
{
id: 4,
name: 'éå¿ è´¤'
},
]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
},
del(i) {
this.list.splice(i, 1)
}
}
})
</script>
</body>
</html>