vue基础核心（四）条件渲染&列表渲染&列表过滤&列表排序&vue.set()的使用&vue监测数据的原理（文章中所有代码均可运行，有问题可留言）

桃桃tao

已于 2022-03-06 14:59:53 修改

阅读量426

点赞数 2

分类专栏： vue（已完结）文章标签： vue.js 前端 javascript vue

于 2022-03-06 14:58:24 首次发布

本文链接：https://blog.csdn.net/weixin_47687315/article/details/123310186

版权

vue（已完结）专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1.条件渲染

*v-show

*v-if

<body>

    <div id="root">

        <div class="style1">

            <h2 v-show="trueOrFalse">你好{{name}}</h2><br>

            <button v-on:click="showOrNotShow">显示or不显示</button><br>

        </div>

        <div class="style2">

            <h2 v-show="true">你好{{name}}</h2><br>

        </div>

        <div class="style3">

            <h2 v-if="trueOrFalse">你好{{name}}</h2><br>

            <button v-on:click="showOrNotShow">显示or不显示</button><br>

        </div>

        <div class="style4">

            <h2 v-if="false">你好{{name}}</h2><br>

        </div>

       

        <!-- template的使用,只能和-v-if配合使用 -->

        <template v-if="a">

            <h2>hello</h2>

            <h2>{{name}}</h2>

            <h2>a:{{a}}</h2>

        </template>

    </div>

   

    <script>

        new Vue({

            el:"#root",

            data() {

                return {

                    name:"guanyao",

                    trueOrFalse:true,

                    a:true

                }

            },

            methods: {

                showOrNotShow(){

                    this.trueOrFalse=!this.trueOrFalse

                }

            },

        })

    </script>

</body>

*v-if与v-show比较：

v-if适用于切换频率较低的场景

v-show适用于切换频率较高的场景

v-if元素可能无法获取到，v-show元素一定能够获取到

2.列表渲染

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <!-- key是唯一标识，不可重复 -->
            <li v-for="item in items" v-bind::key="item.name">{{item.name}}-{{item.age}}</li>
            <li v-for="person in persons" v-bind::key="person.id">{{person.name}}</li>
            <!-- 用索引做key -->
            <li v-for="(item,index) in items" v-bind:key="index">{{index}}--{{item.name}}</li>
        </ul>
        <hr>
        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="value in car">{{value}}</li>
            <li v-for="(value,key) in car" v-bind:key="key">{{key}}:{{value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data() {
                return {
                    items:[
                        {name:"guanyao",age:23},
                        {name:"yuuxiang",age:27},
                        {name:"rourou",age:4}
                    ],
                    persons:[
                        {id:1,name:"aa"},
                        {id:2,name:"bb"},
                        {id:3,name:"aa"}
                    ],
                    car:{
                        name:"bmw",
                        color:"black",
                        price:"60w"
                    }
                }
            },
        })
    </script>
</body>

3.列表过滤

*watch实现

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			//#region 
			 new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			}) 
		</script>
		</body>

*computed实现

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			//用computed实现
			const vm=new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
	</body>

4.列表排序

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<button @click="sortType = 2">年龄升序</button>
			<button @click="sortType = 1">年龄降序</button>
			<button @click="sortType = 0">原顺序</button>
			<ul>
				<li v-for="(p,index) of filPerons" :key="p.id">
					{{p.name}}-{{p.age}}-{{p.sex}}
					
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					sortType:0, //0原顺序 1降序 2升序
					persons:[
						{id:'001',name:'马冬梅',age:30,sex:'女'},
						{id:'002',name:'周冬雨',age:31,sex:'女'},
						{id:'003',name:'周杰伦',age:18,sex:'男'},
						{id:'004',name:'温兆伦',age:19,sex:'男'}
					]
				},
				computed:{
                    filPerons(){
                        const arr= this.persons.filter((p)=>{
                            return p.name.indexOf(this.keyWord)!==-1
                        })
                        if(this.sortType){
                            arr.sort((a,b)=>{
                                return this.sortType === 2 ? a.age-b.age : b.age-a.age
                            })
                        }
                        return arr
                    }
                }
			}) 
		</script>
	</body>

5.vue.set()的使用

<body>
    <div id="root">
        <button v-on:click="addPro">点击添加性别属性</button><br>
        <h2>name:{{student.name}}</h2><br>
        <h2>age:{{student.age}}</h2><br>
        <h2>address:{{student.address}}</h2><br>
        
        <h2 v-if="flag">sex:{{student.sex}}</h2>
    </div>
    <script>
        new Vue({
            el:"#root",
            data() {
                return {
                    student:{
                        name:"guanyao",
                        age:23,
                        address:"dalian"
                    },
                    flag:0
                }
            },
            methods: {
                addPro(){
                    this.$set(this.student,"sex","woman")
                    // Vue.set(this.student,"sex","woman")//两种方式都可
                    this.flag=1
                    //this.$set(this.data,"number",1)//错误写法，Vue.set只能给data里的某一个对象追加属性
                }
            },
        })
    </script>
</body>

6.vue监测数据的原理

*Vue监视数据的原理：

1. vue会监视data中所有层次的数据。

2. 如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

3. 如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素一定要用如下方法：

(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

(2).Vue.set() 或 vm.$set()

*特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

<body>
    <div id="root">
        <h2>学生信息</h2><br>
        <button v-on:click="addAge">点击年龄加一岁</button><br>
        <button v-on:click="addSex">添加性别属性，默认值：男</button><br>
        <button v-on:click="changeSex">修改性别</button><br>
        <button v-on:click.once="addFriend">在列表首位添加一个朋友</button><br>
        <button v-on:click="changeFriendName">修改第一个朋友的名字为张三</button><br>
        <button v-on:click.once="addHobby">添加一个爱好</button><br>
        <button v-on:click="changeFirstHobby">修改第一个爱好为开车</button><br>
        <button v-on:click="deletSmoke">过滤掉爱好中的抽烟</button>
        <h3>姓名：{{student.name}}</h3><br>
        <h3>年龄：{{student.age}}</h3><br>
        <h3 v-if="flag">性别：{{student.sex}}</h3><br>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" v-bind:key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" v-bind:key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data() {
                return {
                    student:{
					    name:'tom',
					    age:18,
					    hobby:['抽烟','喝酒','烫头'],
					    friends:[
						    {name:'jerry',age:35},
						    {name:'tony',age:36}
					    ]
				    },
                    flag:0
                }
            },
            methods: {
                addAge(){
                    this.student.age++
                },
                addSex(){
                    this.$set(this.student,"sex","男")
                    this.flag=1
                },
                addFriend(){
                    this.student.friends.unshift({name:"guan",age:23})
                },
                changeFriendName(){
                    this.student.friends[0].name="张三"
                },
                changeSex(){
                    if(this.student.sex==="男"){
                        this.student.sex="女"
                    }
                    else if(this.student.sex==="女"){
                        this.student.sex="男"
                    }
                },
                addHobby(){
                    this.student.hobby.push("学习")
                },
                changeFirstHobby(){
                    this.student.hobby.splice(0,1,"开车")
                },
                deletSmoke(){
                    this.student.hobby=this.student.hobby.filter((h)=>{
                        return h!=="抽烟"
                    })
                }
            },
        })
    </script>
</body>

桃桃tao

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础核心（四）条件渲染&列表渲染&列表过滤&列表排序&vue.set()的使用&vue监测数据的原理（文章中所有代码均可运行，有问题可留言）

1.条件渲染*v-show*v-if<body> <div id="root"> <div class="style1"> <h2 v-show="trueOrFalse">你好{{name}}</h2><br> <button v-on:click="showOrNotShow">显示or不显示</button>&lt...
复制链接

扫一扫