1.列表渲染_过滤与排序
1.列表过滤(搜索)
2.列表排序
<div id="demo">
<input type="text" v-model="searchName" />
<ul>
<li v-for="(p,index) in filterPersons">
{{index}}---{{p.name}}--{{p.age}}
</li>
</ul>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本升序</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="application/javascript">
new Vue({
el: '#demo',
data: {
searchName: '',
orderType: 0, //0代表原本顺序,1代表升序,2代表降序
persons: [{
name: 'Tom',
age: 18
},
{
name: 'Jack',
age: 19
},
{
name: 'Bob',
age: 12
},
{
name: 'Shan',
age: 18
}
]
},
computed: {
filterPersons() {
//取出所有相关的数据
const {
searchName,
persons,
orderType
} = this
//最终需要显示的数组
let fPersons
//对persons进行过滤
//y.indexOf(x)方法中:如果有y包含了x,则返回x的索引值,如果没有包含,则返回-1
fPersons = persons.filter(p => p.name.indexOf(searchName) >= 0)
//排序
if(orderType != 0) {
fPersons.sort(function(p1, p2) { //如果返回负数,p1在前,返回正数,p2在前
//1 代表升序 2.代表降序
if(orderType == 2) {
return p2.age - p1.age //降序 以1 2 为例 此时为正数
} else {
return p1.age - p2.age //升序 以1 2 为例 此时为负数
}
})
}
return fPersons
}
},
methods: {
setOrderType(orderType) {
this.orderType = orderType
}
}
})
</script>
2.事件处理
2.1.绑定监听
使用@click对单点事件进行绑定
a.不传参数:test1
实际上是传了一个$event,在方法调用的时候我们可以使用这个默认参数
b.传递参数:test2('ABC')
传递了一个参数,就会把我们的默认event参数覆盖,在方法调用时,不能使用event参数了
c.传递参数与event:test3('ABC',$event)
传递了一个参数,页把event参数传递了过去
2.2.事件修饰符
a.@click.stop:
表示去除冒泡事件,由于我们设置两个div,但是div具有重叠部分,此时设置.stop属性就可以阻止覆盖的部分执行两个div的方法
b.@click.prevent:
表示阻止默认事件的发生.(下例是阻止超链接进行跳转)
如:<a href="http://www.baidu.com" @click.prevent="test7">百度一下</a>
2.3.按键修饰符
说明:对指定按键功能进行修饰,如:<input type="text" @keyup.enter="test8" />
综述代码:
<div id="demo">
<h2> 1. 绑定监听</h2>
<button @click="test1">test1</button>
<button @click="test2('ADC')">test2</button>
<!--当我们在事件中不传参数时实际上传了一个$event,如:test3($event)-->
<button @click="test3">test3</button>
<button @click="test4(123,$event)">test4</button>
<h2> 2. 事件修饰符</h2>
<div style="width: 200px;height: 200px;background: red;" @click="test5">
<div style="width: 100px;height: 100px;background: gray;" @click.stop="test6"></div>
</div>
<a href="http://www.baidu.com" @click.prevent="test7">百度一下</a>
<h2> 3. 按键修饰符</h2>
<input type="text" @keyup.enter="test8" />
<input type="text" @keyup.13="test8" />
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
test1() {
alert('test1')
},
test2(msg) {
alert('test2' + msg)
},
test3(event) {
alert(event.target.innerHTML)
},
test4(num, event) {
alert(num + '----' + event.target.innerHTML)
},
test5() {
alert('out')
},
test6(event) {
//event.stopPropagation()
alert('inner') //由于inner在out的区域之中,所以我们点击innerout也会执行,此时我们就要对out事件进行停止(stop)
},
test7(event) { //阻止事件的默认型为
//event.preventDefault()
alert('阻止事件默认行为')
},
test8(event) {
// if (event.keyCode === 13) {
// alert(event.target.value+' '+event.keyCode)
// }
alert(event.target.value + event.keyCode)
}
}
})
</script>
3.表单输入绑定
使用 v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
selext
综述代码:
<div id="demo">
<form action="#" @submit.prevent="handleSubmit">
<span>用户名:</span>
<input type="text" v-model="username" /><br />
<span>密码:</span>
<input type="text" v-model="pwd" /><br />
<span>性别:</span>
<input type="radio" id="female" value="女" v-model="sex" />
<label for="female">女</label>
<input type="radio" id="male" value="男" v-model="sex" />
<label for="male">男</label><br />
<span>爱好:</span>
<input type="checkbox" id="basketball" value="basketball" v-model="likes" />
<label for="basketball">篮球</label>
<input type="checkbox" id="football" value="football" v-model="likes" />
<label for="foot">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes" />
<label for="pingpang">乒乓</label><br />
<span>城市:</span>
<select name="" v-model="cityId">
<option value="">未选择</option>
<option :value="city.id" v-for="(city,index) in allCitys" :key='index'>{{city.name}}</option>
</select><br />
<span>介绍:</span>
<textarea rows="10" v-model="desc"></textarea><br /><br />
<input type="submit" value="注册" />
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
username: '',
pwd: '',
sex: '女',
likes: ['pingpang'],
allCitys: [{
id: 1,
name: '北京'
}, {
id: 2,
name: '成都'
}, {
id: 3,
name: '上海'
}],
cityId: '',
desc: '描述介绍',
},
methods: {
handleSubmit() {
console.log(this.username + this.pwd, this.sex, this.likes, this.cityId, this.desc)
}
}
})
</script>
