利用vue實現的一些小案例
阿新 • • 發佈：2019-01-03
1、利用hash過濾資料
核心程式碼：
js程式碼：
<script> var vm = new Vue({ el:'#app', data:{ isShow:'red' } }); function hash(){ var hash = window.location.hash.slice(1); vm.isShow = hash; } hash(); window.addEventListener('hashchange',hash)//事件：hashchange </script>
html:
<a href="#red" :class="{active:isShow==='red'}">顯示紅色字型</a>
<a href="#yellow" :class="{active:isShow==='yellow'}">顯示黃色色字型</a>
<a href="#black" :class="{active:isShow==='black'}">顯示黑色字型</a>2、在輸入框中輸入內容後按enter鍵新增到列表：
在這個小案例中：最主要的是利用好v-model（雙向資料繫結）的技巧，在data中用val專門存放輸入框中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新增到列表</title> <script src="../vue.js"></script> <style> #app{width:100%; padding:20px;} ul,li{padding:0; margin:0;} input{width:200px; height:30px; padding-left:10px;} .list{list-style:none; } .list li{width:300px; height:40px; line-height:40px; border-bottom:1px solid #af5b5e;} .list li span{float:left;} .list li em{float:right;} </style> </head> <body> <div id="app"> <input type="text" placeholder="按enter鍵可新增列表內容" @keydown.enter="enterFn" v-model="val" /> <ul class="list"> <li v-for="item in dataList"><span>{{item.title}}</span><em>{{item.date}}</em></li> </ul> </div> <script> var Date = new Date() var vm = new Vue({ el:'#app', data:{ dataList:[], val:'' }, methods:{ enterFn(){ this.dataList.push({ title:this.val, date:`${Date.getFullYear()}-${getTwo(Date.getMonth()+1)}-${getTwo(Date.getDate())}` }) this.val='' } } }) function getTwo(n){ return n<10?'0'+n:''+n } </script> </body> </html>
3、實現多選框
這個不難，佈局布好了，就簡單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../vue.js"></script>
<style>
.box {
margin: 100px auto 0;
width: 80%;
}
.clear:after {
content: '';
display: block;
clear: both;
}
.checkbox {
margin: 0;
padding: 0;
display: inline-block;
list-style: none;
}
.checkbox .item {
float: left;
position: relative;
padding: 12px 20px 12px 30px;
cursor: pointer;
transition: .2s all;
}
.checkbox .item:before {
position: absolute;
left: 10px;
top: 16px;
/*display: inline-block;*/
border: 1px solid #333;
width: 12px;
height: 12px;
content: '';
transition: .2s all;
}
.checkbox .item.checked, .checkbox .item:hover {
color: #409eff;
}
.checkbox .item.checked:before {
border-color: #409eff;
background: #409eff;
content: '\2713';
/*content:'\e605';*/
color: #fff;
font-size: 12px;
text-align: center;
line-height: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<ul class="checkbox clear">
<li
class="item"
v-for="item in dataList"
@click="selectHandle(item)"
:class="{checked:!item.isSelect}"
>{{item.name}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'.box',
data:{
dataList:[
{
name:'胡歌',
isSelect:true
},
{
name:'陳默',
isSelect:true
},
{
name:'陶亞東',
isSelect:true
},{
name:'劉詩詩',
isSelect:true
},
{
name:'董卿',
isSelect:true
},
{
name:'王昱珩',
isSelect:true
}]
},
methods:{
selectHandle(item){
item.isSelect = !item.isSelect
}
}
})
</script>
</body>
</html>還有一種方法也可以實現多選（css程式碼和上面的一樣哦）
<div class="box">
<ul class="checkbox clear">
<li
class="item"
v-for="item,index in dataList"
@click="selectHandle(item)"
:class="{checked:n.includes(item)}"
>{{item}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el:'.box',
data: {
dataList: ['胡歌','陳默','陶亞東','王昱珩'],
n:[]
},
methods:{
selectHandle(item){
if(this.n.includes(item)){
this.n = this.n.filter(data=>data!=item)
}else{
this.n.push(item)
}
}
}
})
</script>