v-if v-show v-for

文章目录

1. v-if v-show
v-if  v-else  类似js里的if else
v-show  类似js样式  display:block  display:none

区别:
v-if , v-else dom树只会显示一个

v-show 都会显示在dom里

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <p v-if="ok"> success </p>
        <p v-else> fail </p>
        <p v-show="ok"> success </p>
        <p v-show="!ok"> fail </p>
        <button @click="ok=!ok"> 点击切换 </button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                ok: true
            },
        })
    </script>
</body>
</html>
2. v-for

基本用法:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in todos" :key="index">
                {{ item.name }} -- {{ item.age }}---
                <button @click="deleteData(index)"> 删除 </button> ---
                <button @click="updateData(index, {name: 'tt', age: 22})">  修改 </button>
            </li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                todos: [
                    {name: 'dou', age: 16},
                    {name: 'jack', age: 17},
                    {name: 'tom', age: 18},
                    {name: 'ttl', age: 19},
                    {name: 'alice', age: 13},
                ]
            },
            methods:{
                deleteData(index){
                    console.log(this.todos)
                    this.todos.splice(index, 1)
                },
                updateData(index, newData){
                    this.todos.splice(index, 1, newData)
                }
            }
        })
    </script>
</body>
</html>

案例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <input type="text" v-model="searchName">
        <ul>
            <li v-for="(item, index) in newTodos" :key="index">
                {{ item.name }} -- {{ item.age }}
            </li>
        </ul>
        <button @click="setOrder(1)"> 年龄升序 </button>
        <button @click="setOrder(2)"> 年龄降序 </button>
        <button @click="setOrder(0)"> 原本顺序 </button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                searchName:'', // 通过searchName 过滤
                orderType: 0,  // 0代表原本顺序,1代表升序,2代表降序
                todos: [
                    {name: 'dou', age: 16},
                    {name: 'jack', age: 17},
                    {name: 'tom', age: 18},
                    {name: 'ttl', age: 19},
                    {name: 'aloce', age: 13},
                ]
            },
            methods:{
                setOrder(order){
                    this.orderType = order;
                }
            },
            computed:{
                // 筛选过后的数据
                newTodos(){
                    // 获取需要的数据
                    const {searchName, todos, orderType} = this;
                    let arr = todos.filter(todo=>todo.name.indexOf(searchName) !== - 1);

                    arr.sort((a, b)=>{
                        if(orderType !== 0){
                            if(orderType == 1){
                                return a.age -b.age;
                            }else{
                                return b.age-a.age
                            }
                        }
                    });
                    return arr;
                }
            }

        })
    </script>
</body>
</html>

在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页