vue中列表过滤
<body>
<div id="app">
<input type="text" v-model="searchInput">
<ul>
<li v-for="(item,index) in searchList" :key="index">
{
{item.name}}--{
{item.price}}
</li>
</ul>
</div>
</body>
<script src="./js/vue2.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
searchInput:'',
goodsList:[
{ name: '牛仔裤', price: '88元' },
{ name: '运动裤', price: '67元' },
{ name: '羽绒服', price: '128元' },
{ name: '运动服', price: '100元' },
]
}
},
computed:{
searchList(){
let list = this.goodsList.filter((item)=>{
return item.name.indexOf(this.searchInput)!==-1
})
return list;
}
}
});
</script>vue中列表排序
<body>
<div id="app">
<input type="text" v-model="inputValue" />
<button @click="keyWord=1">升序</button>
<button @click="keyWord=2">降序</button>
<button @click="keyWord=0">原顺序</button>
<ul>
<li v-for="item in newList">{
{item.name}}-{
{item.price}}</li>
</ul>
</div>
</body>
<script src="./js/vue2.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
keyWord: 0,
inputValue: '',
list: [
{ name: '牛仔裤', price: 88 },
{ name: '运动裤', price: 67 },
{ name: '羽绒服', price: 128 },
{ name: '运动服', price: 100 },
],
},
computed: {
newList() {
const arr1 = this.list.filter((i) => {
return i.name.indexOf(this.inputValue) !== -1;
});
if (this.keyWord) {
arr1.sort((a1, a2) => {
return this.keyWord === 1
? a1.price - a2.price
: a2.price - a1.price;
});
}
return arr1;
},
},
});
</script>vue中数据更新的问题
对象新增数据更新问题
-
描述
-
通过普通对象添加属性方法，Vue不能监测到且不是响应式
-
this.obj.name= '张三'解决
-
Vue.set() / this.$set
this.$set(this.obj,'name','张三')- 注意
-
this.$set不能给vue实例的根数据对象添加属性
-
-
数组数据更新问题
-
描述
-
直接通过数组索引值改变数组的数据，Vue监测不到改变
-
实际在
js内存已经把数据的第一项数据修改了this.list[0] = { name: '李四',age: 20 };
-
-
-
原因
扫描二维码关注公众号，回复： 16712337 查看本文章
-
因为在vue中数组并没有跟对象一样封装有监测数据变化的getter、setter
-
-
解决
-
Vue在数组的原始操作方法上包裹了重新解析模板的方法，
也就是说我们在data里面的数组操作方法不是原生的，是vue封装过的
-
哪些数组操作方法经过了封装？
push() 向数组的末尾添加一个或更多元素，并返回新的长度。 pop() 删除数组的最后一个元素并返回删除的元素 shift() 删除并返回数组的第一个元素 unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 splice() 从数组中添加或删除元素。 sort() 对数组的元素进行排序 reverse() 反转数组的元素顺序。
-
完整代码
<body>
<div id="app">
<div v-for="(attract,key) in person">
{
{key}}----{
{attract}}
</div>
<div><input type="text" v-model="searchInput"></div>
<div>
<button @click="paixu(1)">升序</button>
<button @click="paixu(2)">降序</button>
<button @click="paixu(0)">原顺序</button>
</div>
<div v-for="(item,index) in searchList">
{
{item.name}}----{
{item.price}}
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app=new Vue({
el:"#app",
data(){
return{
keyword:0,//控制排序的
searchInput:"",
goodsList:[
{name:"牛仔裤",price:40},
{name:"运动裤",price:80},
{name:"直筒裤",price:30},
{name:"西裤",price:150},
{name:"运动鞋",price:120},
{name:"小白鞋",price:30},
{name:"皮鞋",price:130},
{name:"黄金短裤",price:10000}
],
person:{
name:"导导",
seg:"男"
}
}
},
methods:{
paixu(val){
this.keyword=val
}
},
computed:{
//把goodsList的内容过滤,把符号条件的形成新的数组
//filter时数组的过滤方法,这个方法的参数是一个函数,此函数返回true,则把此行返回新的数组中
searchList(){
let list=this.goodsList.filter((item)=>{
return item.name.indexOf(this.searchInput)!==-1
})
if (this.keyword) {
list.sort((a1,a2)=>{
return this.keyword===1
? a1.price - a2.price
: a2.price - a1.price;
})
}
return list
}
}
})
</script>