Vue-02
(十六)、基本列表渲染 (v-for)
1.使用v-for遍历数组
- 这里我们必须要设置一个key值，虽然key值已经不被报错。但是我们还是要设置，因为我们的数据要根据key进行后期维护.这里我们要进行绑定 data的数据
- v-for,里面隐含一个遍历出来的 Value 以及 index
- Vue的遍历借助的是 for in 循环的操作
- 我们的
表达式要写成Value的值并不是data区域的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息</h2>
<!-- 使用v-for 遍历数组 -->
<ul>
<!-- 在这里我们只需要对列表进行循环即可，传进来的第一个是value，第二个是index.Vue的循环遍历借助于 for in -->
<li v-for="(value,index) in persons" :key="persons.id">{
{value.id}}--{
{value.name}}--{
{value.age}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
// 列表信
persons:[
{
id:'001',name:'吉士先生1',age:18},
{
id:'002',name:'吉士先生2',age:28},
{
id:'003',name:'吉士先生3',age:38},
{
id:'004',name:'吉士先生4',age:48}
]
}
});
</script>
</body>
</html>
2.使用v-for遍历对象
- 这里存放着两个值: 第一个是Value,第二个是 Key值
- 我们RestulMatch里面写的是 Value 并不是data区域里面的数据
- Key值的也要进行单项数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>小汽车信息</h2>
<ul>
<li v-for="(Value,Key) in car" :key="Key">{
{Value}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
car:{
name:'领克06',
price:'13w',
color:'灰色'
}
}
});
</script>
</body>
</html>
3.使用v-for遍历字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
v-for指令:
1.用于展示列表数据
2.语法: v-for='(item,index) in car' :key='item.id'
3.可遍历: 数组 对象
-->
<h2>人员列表信息</h2>
<!-- 使用v-for 遍历数组 -->
<ul>
<!-- 在这里我们只需要对列表进行循环即可，传进来的第一个是value，第二个是index.Vue的循环遍历借助于 for in -->
<li v-for="(value,index) in persons" :key="persons.id">{
{value.id}}--{
{value.name}}--{
{value.age}}---{
{index}}</li>
</ul>
<h2>小汽车信息</h2>
<ul>
<li v-for="(Value,Key) in car" :key="Key">{
{Value}}---{
{Key}}</li>
</ul>
<h2>遍历字符串</h2>
<ul>
<li v-for="(Value,index) in str">{
{Value}}---{
{index}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
// 列表信
persons:[
{
id:'001',name:'吉士先生1',age:18},
{
id:'002',name:'吉士先生2',age:28},
{
id:'003',name:'吉士先生3',age:38},
{
id:'004',name:'吉士先生4',age:48}
],
car:{
name:'领克06',
price:'13w',
color:'灰色'
},
str:'asdsdsd'
}
});
</script>
</body>
</html>
(十七)、列表过滤 (filter())
1.⭐JS中Change属性的原生状态⭐
Computed的数据修改会保留原数据，Watch的数据修改不保留原数据
- 当我们失去焦点值得时候，我们的信息才会显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="shuru">
<script type="text/javascript">
const shuru=document.getElementById("shuru");
shuru.addEventListener('change',()=>{
console.log('1');
})
</script>
</body>
</html>
2.使用watch监听实现
- 我们监听关键字，假如关键字发生变化 我们就进行过滤，并且进行替换
- 过滤一次少一次，回不到过去了。因为这里一直在改变原数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表信息</h2>
<!--
想要对数据加工后再展示，且不想要破坏元数据，最好就使用计算属性
-->
<input type="text" v-model="keywords">
<ul>
<li v-for="(value,index) in persons" :key="persons.id">
{
{value.id}}--{
{value.name}}--{
{value.age}}---{
{index}}</li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
// 列表信
persons: [
{
id: '001', name: '马冬梅', age: 18 },
{
id: '002', name: '周冬雨', age: 28 },
{
id: '003', name: '周杰伦', age: 38 },
{
id: '004', name: '温兆伦', age: 48 }
],
keywords:''
},
// computed: {
// fmtPersons(){
// const {keywords} = this; //这里相当于 const keywords=this.keywords;
// return this.persons.filter(p=>p.name.indexOf(keywords)!==-1);
// }
// }
// 使用watch修改元数据。会导致元数据的丢失
watch: {
//当检测的数据发生改变的时候，就会调用我们这个方法
keywords(newValue){
const arr=this.persons.filter((p,index)=>{
// array.filter(function(currentValue,index,arr), thisValue)
return p.name.indexOf(newValue)!=-1;
});
this.persons=arr; // 返回值是过滤后的数组
}
}
});
</script>
</body>
</html>
3.const {xxx} = this 在Vue的作用⭐
const {
aaa,bbb,ccc}=this;
=>
const aaa=this.aaa;
const bbb=this.bbb;
const ccc=this.ccc;
⭐4.JS箭头函数参数的简写⭐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<
