Vue--条件渲染、列表渲染

最新推荐文章于 2024-07-25 11:52:08 发布

码码姑娘

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量85

点赞数

分类专栏：小白的前端开发学习之路文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_45204129/article/details/121512017

版权

小白的前端开发学习之路专栏收录该内容

20 篇文章 0 订阅

订阅专栏

条件渲染

v-show 条件渲染、条件显示

v-show 条件渲染、条件显式实现display的效果 =>v-show(false）==display:none
通常让一个元素显式、隐藏(display:none; visibility: hidden)
原生的js：style
jQuery: css
vue : v-show v-if
<h1 v-for="count in 5" v-text="count" v-show="false"></h1>

v-if 条件分支显式

条件分支显式效果等同于v-show 但是性能和安全跟v-show不一样
v-else-if v-else
<h1 v-if="a < 1"> 我是小于1</h1>
<h1 v-else-if="a == 1"> 我是等于1</h1>
<h1 v-else> 我是大于1</h1>

<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->

<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->

<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->

列表渲染

v-for 直接在html里头做数组循环

可以对数字、数组、对象等进行循环遍历

<h1 v-for="(item, index) in arr" v-text="item" :key="index"></h1>
item: 表示遍历过程的每一项元素 元素可能是简单地数据类型也可能是复杂的数据类型
index: 表示遍历过程的每一项元素的下标
v-for的作用域：向内，即所有的子元素都可以共享item index arr三个变量
缩写：（即舍弃index） v-for="item in arr"
计数：
v-for="count in 100"

这个key如果写了是怎么样的过程

使用id作为key，数据不会错乱，同时效率比较高。

列表筛选：

例子：

采用监视属性
<body>
    <div id="root">
        <input type="text" placeholder="请输入姓名" v-model="keywords">
        <ul>
            <li v-for="(p, index) in filpersons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001', name:'马冬梅',age:'24'},
                {id:'002', name:'周冬雨',age:'24'},
                {id:'003', name:'周杰伦',age:'24'}
            ],
            keywords:"",
            filpersons:[]
        },
        watch: {
            keywords:{
                immediate:true,//这里是为了开始就调用，而且这时候筛选的是空串，
                handler(newValue){
                    this.filpersons = this.persons.filter((p)=>{
                        return p.name.indexOf(newValue) != -1;
                    })
                }
            }
        },
    })

</script>

采用计算属性

<body>
    <div id="root">
        <input type="text" placeholder="请输入姓名" v-model="keywords">
        <ul>
            <li v-for="(p, index) in filpersons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001', name:'马冬梅',age:'24'},
                {id:'002', name:'周冬雨',age:'24'},
                {id:'003', name:'周杰伦',age:'24'}
            ],
            keywords:""
        },

        computed: {
            filpersons(){
                 return this.persons.filter((p)=>{
                    return p.name.indexOf(this.keywords) != -1;
                })
            }
        },

在筛选的基础上进行排序

<body>
    <div id="root">
        <input type="text" placeholder="请输入姓名" v-model="keywords">
        <button @click="sorttype = 2">点击进行升序</button>
        <button @click="sorttype = 1">点击进行降序</button>
        <button @click="sorttype = 0">原序</button>
        <ul>
            <li v-for="(p, index) in filpersons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false;
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001', name:'马冬梅',age:'45'},
                {id:'002', name:'周冬雨',age:'24'},
                {id:'003', name:'周杰伦',age:'36'}
            ],
            keywords:"",
            sorttype:0
        },

        computed: {
            filpersons(){
                const arr = this.persons.filter((p)=>{
                    return p.name.indexOf(this.keywords) != -1;
                })

                if (this.sorttype ) {
                    arr.sort((a,b)=>{
                        return this.sorttype === 2 ? a.age-b.age : b.age - a.age;
                    })                
                }
                return arr;
            }
        },

码码姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--条件渲染、列表渲染

条件渲染v-show 条件渲染、条件显示v-show 条件渲染、条件显式实现display的效果 =>v-show(false）==display:none通常让一个元素显式、隐藏(display:none; visibility: hidden)原生的js：stylejQuery: cssvue : v-show v-if<h1 v-for="count in 5" v-text="count" v-show="false"></h1>v-if
复制链接

扫一扫

专栏目录