基础遍历(v-for)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Vue学习第二天 </title>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<!--
v-for的key(默认使用index作为key)必须是数据的唯一标识,
否则在某些特殊场景下(例如新插入的数据破坏了原有的顺序)
会造成数据错乱并降低效率
vue在渲染时会首先生成一个虚拟DOM,然后再根据虚拟DOM生成真实DOM
当数据发生变化时,Vue会重新生成虚拟DOM,并根据Key值去和真实DOM比较
是否发生了变化,一旦顺序破坏,那index也会被重新排序,因此可能造成
输入类的项被忽略渲染和可以复用的项重复渲染
-->
<h3>遍历列表</h3>
<ul>
<li v-for="(apple,index) in apples" :id="apple.id">
版本:{{apple.version}} , 价格:{{apple.price}} , 索引{{index}}
</li>
</ul>
<h3>遍历对象</h3>
<ul>
<li v-for="(val,key) in me" :id="key">
key:{{key}} , 值{{val}}
</li>
</ul>
<h3>遍历字符串</h3>
<ul>
<li v-for="(char,index) in name" :id="index">
字符:{{char}} 索引:{{index}}
</li>
</ul>
<h3>遍历指定次数</h3>
<ul>
<li v-for="(number,index) in 10" :id="index">
当前数字:{{number}};当前索引:{{index}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
apples: [
{
id: "001",
version: "iphone 13 mini",
price: "4999"
},
{
id: "002",
version: "iphone 13",
price: "5999"
},
{
id: "003",
version: "iphone 13 pro",
price: "7999"
}
],
me: {
name: "tineaine",
height: "176",
weight: "70kg"
},
name: "TineAine"
}
},
methods: {},
computed: {}
});
</script>
</body>
</html>
列表过滤
watch实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Vue学习第二天 </title>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<h3>列表过滤</h3>
<input v-model="keyWord"></input>
<ul>
<li v-for="apple in fliArray" :id="apple.id">
版本:{{apple.version}} , 价格:{{apple.price}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
// 数组格式
apples: [
{
id: "001",
version: "iphone 13 mini",
price: "4999"
},
{
id: "002",
version: "iphone 13",
price: "5999"
},
{
id: "003",
version: "iphone 13 pro",
price: "7999"
},
{
id: "004",
version: "iphone 12 mini",
price: "3999"
},
{
id: "005",
version: "iphone 12",
price: "4999"
},
{
id: "006",
version: "iphone 12 pro",
price: "6999"
}
],
// 列表过滤输入框
keyWord: "",
// watch方式修改后的数据
fliArray: []
}
},
watch: {
keyWord: {
immediate: true,
handler(val) {
this.fliArray = this.apples.filter((p) => {
return p.version.indexOf(val) != -1
})
}
}
}
});
</script>
</body>
</html>
computed实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Vue学习第二天 </title>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<h3>列表过滤</h3>
<input v-model="keyWord"></input>
<ul>
<li v-for="apple in filArray" :id="apple.id">
版本:{{apple.version}} , 价格:{{apple.price}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
// 数组格式
apples: [
{
id: "001",
version: "iphone 13 mini",
price: "4999"
},
{
id: "002",
version: "iphone 13",
price: "5999"
},
{
id: "003",
version: "iphone 13 pro",
price: "7999"
},
{
id: "004",
version: "iphone 12 mini",
price: "3999"
},
{
id: "005",
version: "iphone 12",
price: "4999"
},
{
id: "006",
version: "iphone 12 pro",
price: "6999"
}
],
// 列表过滤输入框
keyWord: "",
}
},
methods: {},
computed: {
filArray: function () {
return this.apples.filter((p) => {
return p.version.indexOf(this.keyWord) != -1
})
}
},
});
</script>
</body>
</html>
列表排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title> Vue学习第二天 </title>
<script type="text/javascript" src="../js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
</style>
</head>
<body>
<div id="root">
<h3>列表过滤</h3>
<input v-model="keyWord"></input>
<button @click="sortType=1">升序</button>
<button @click="sortType=2">降序</button>
<button @click="sortType=0">原序</button>
<ul>
<li v-for="apple in filArray" :id="apple.id">
版本:{{apple.version}} , 价格:{{apple.price}}
</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data() {
return {
// 数组格式
apples: [
{
id: "001",
version: "iphone 13 mini",
price: "4999"
},
{
id: "002",
version: "iphone 13",
price: "5999"
},
{
id: "003",
version: "iphone 13 pro",
price: "7999"
},
{
id: "004",
version: "iphone 12 mini",
price: "3999"
},
{
id: "005",
version: "iphone 12",
price: "4999"
},
{
id: "006",
version: "iphone 12 pro",
price: "6999"
}
],
// 列表过滤输入框
keyWord: "",
// 排序类型 0:原序,1:正序,2:逆序
sortType: 0
}
},
methods: {},
computed: {
filArray: function () {
const arr = this.apples.filter((p) => {
return p.version.indexOf(this.keyWord) != -1
})
if (this.sortType) {
arr.sort((i1, i2) => {
return this.sortType === 1 ? i2.price - i1.price : i1.price - i2.price
})
}
return arr
}
},
});
</script>
</body>
</html>