Vue基础小知识（三）-----渲染，过滤，内置指令

熊猫的猫

已于 2022-10-09 21:41:13 修改

阅读量264

点赞数

文章标签： javascript 前端开发语言

于 2022-10-03 17:17:22 首次发布

本文链接：https://blog.csdn.net/m0_73520343/article/details/127149176

版权

1.class与style绑定样式

：class=" " 1.字符串写法，适用于类名不确定，需要动态指定（1个）

2.数组写法，适用于绑定个数不确定，类名不确定（多个）

3.对象写法，适用于绑定的个数确定，类名确定（动态决定使用）

：style=" " 适用对象{ ： },数组【】

2.条件渲染（重要）

显示 v-show=”true“ 相当于display：block

隐藏 v-show=”false“ 相当于display：none

v-if与v-else可以一起使用，会更改dom节点，少量切换状态用v-show更合适

<!-- v-if 和 template 联合使用 -->
<template v-if="n==4">

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- v-show渲染 -->
        <h2 v-show="true">欢迎来到这里,{{name}}</h2>
        <!-- v-if渲染 -->
        <h2 v-if="true">欢迎来到这里,{{name}}</h2>
        <!-- v-if 和v-else-if 一起用 -->
        <h3>n 的值是:{{n}}</h3>
        <button @click="n++">点击按钮n+1</button>
        <div v-if="n==1">你好</div>
        <div v-else-if="n==2">请努力</div>
        <div v-else-if="n==3">但一定别焦虑</div>
        <!-- v-if 和 template 联合使用 -->
        <template v-if="n==4">
            <div >你好</div>
            <div >请努力</div>
            <div >但一定别焦虑</div>
        </template>
    <script>
        new Vue({
            el:'#root',
            data() {
                return {
                    name:'加油',
                    n:'0',
                }
            },
        })
    </script>
</body>
</html>

3.列表渲染（重要）

遍历数组，对象较多

v-for="item in list" :key="item.id" 用唯一标识作为key，用index时逆序会有问题，并且顺序效率低

key的原理（重要）：key是虚拟dom的标识，当数据发生改变时，Vue会根据新数据生成新的虚拟dom，与旧的虚拟dom对比，（1）旧的虚拟dom找到与新的虚拟dom有相同的key，内容没变则用旧的虚拟dom；内容改变了，生成新的虚拟dom（2）没有找到相同的key，生成新的虚拟dom

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">点击添加老六</button>
        <ul>
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}--{{p.age}}
            <input type="text">
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:'#root',
            data() {
                return {
                    persons:[
                        {id:'01',name:'张三',age:'25'},
                        {id:'02',name:'李四',age:'38'},
                        {id:'03',name:'王五',age:'34'},
                    ],
                    
                }
            },
            methods: {
                add(){
                    const p={id:'04',name:'老六',age:'40'}
                    this.persons.unshift(p)
                }
            },
        })
    </script>
</body>
</html>

补充：unshift（）是在数组前添加元素 shift（）在前删除元素

push（）实在末尾添加元素 pop（）在末尾删除元素

this.person=this.per.filter.indexOf(val)!=-1 数组中包含val返回具体位置，不包含返回-1

4.列表过滤

filter过滤，不改变原有数组（模糊查询）


<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>搜索</h2>
        <input type="text" placeholder="点我搜索" v-model="keyWord">
        <button @click="sortType=1">年龄升序</button>
        <button @click="sortType=2">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <ul>
            <!-- 遍历数组用v-for -->
            <li v-for="(p,index) in filper" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script>
        const vm=new Vue({
            el :'#root',
            data() {
                return {
                    keyWord:'',
                    sortType:'0',//0是原顺序 1是升序 2是降序
                    persons:[
                        {id:'01',name:'马冬梅',age:'25',sex:'女'},
                        {id:'02',name:'周冬雨',age:'22',sex:'女'},
                        {id:'03',name:'周杰伦',age:'26',sex:'男'},
                        {id:'04',name:'张杰',age:'34',sex:'男'},
                        {id:'05',name:'周深',age:'29',sex:'男'},
                        {id:'06',name:'于文文',age:'32',sex:'女'},
                        {id:'07',name:'张靓颖',age:'37',sex:'女'},
                    ]
                }
            },
            //用computed实现
            computed:{
                filper(){
                    const arr= this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord)!==-1
                    })
                    if(this.sortType){
                        arr.sort((a,b)=>{
                            return this.sortType ===1? a.age-b.age : b.age-a.age
                        }) 
                    }
                    return arr
                }
            }
        })
    </script>
</body>
</html>

可以用来模糊搜索查询

5.收集表单数据

v-model收集时value值

没有配置value，checkbox收集的是checked（true/false）

注意：v-model三个修饰符

lazy：失去焦点在收集 number：有效数据 trim：过滤空格

6.内置指令

v-bind v-model数据绑定	v-for 遍历	v-on即@
v-show v-if 条件渲染	v-text渲染文本内容	v-html支持结构解析
v-cloak（没有值）解决出现{{}}问题	v-once（没有值）	v-pre不解析了