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>