[JavaScript知识库] Vue基础学习三

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue基础学习三 -> 正文阅读

[JavaScript知识库]Vue基础学习三

v-for
v-if
v-show

v-for：
vue可以循环的几种类型

1.普通数组
2.对象数组
3.数字
4.对象

<!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">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1.普通数组 -->
        <!-- <div v-for="userId in userIds">{{userId}}</div> -->
        <!-- 2.对象数组 -->
        <!-- <div v-for="user in userList">id:{{user.id}}；姓名：{{user.name}}</div> -->
        <!-- 索引循环对象的第二个是索引，索引一直从0开始 -->
        <!-- <div v-for="(user,i) in userList">id:{{user.id}}；姓名：{{user.name}}；索引：{{i}}</div> -->
        <!-- 3.数字 -->
        <!-- <div v-for="item in 10">{{item}}</div> -->
        <!-- 4.对象 -->
        <!-- <div v-for="user in UserInfo">{{user}}</div>
        <div v-for="(value,key,index) in UserInfo">值：{{value}}；键：{{key}}；索引：{{index}}</div> -->
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            userIds:[1,2,3,4,5,6],
            userList:[
                {id:1,name:"张三"},
                {id:2,name:"李四"},
                {id:3,name:"王五"},
                {id:4,name:"赵六"},
                {id:5,name:"田七"},
            ],
            UserInfo:{id:4,name:"赵六"}
        }
    })
</script>

5.默认以索引绑定，需要使用key属性改变默认设置

挖坑记录，v-for循环时索引永远从0开始，那么在循环内容中就需要注意自己所取的值会不会受索引的影响，例如下方的我们如果不用:key="user.id"那么我们的值在添加或减少时就会影响数据的值

<!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">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select>
            <!-- <option v-for="user in userList" >{{user.name}}</option> -->
            <!-- <option v-for="(user,i) in userList" :key="i">{{user.name}}</option> -->
            <option v-for="(user,i) in userList" :key="user.id">{{user.name}}</option>
        </select>
        <button @click="addUser">添加人</button>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            userIds:[1,2,3,4,5,6],
            userList:[
                {id:1,name:"张三"},
                {id:2,name:"李四"},
                {id:3,name:"王五"},
                {id:4,name:"赵六"},
                // {id:5,name:"田七"},
            ],
            UserInfo:{id:4,name:"赵六"}
        },
        methods:{
            addUser(){
                this.userList.unshift({id:5,name:"田七"})
            }
        }
    })
</script>

v-if和v-show

v-if和v-show的相同点在于都可以控制标签的显示与否，区别在于，v-if显示/隐藏的方式是直接将标签创建/销毁，而v-show的隐藏方式是通过style="display:none;"的方式隐藏标签,v-if比v-show的消耗资源会更多

<!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">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="isif">div1</div>
        <div v-show="isshow">div2</div>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isif:true,
            isshow:true
        }
    })
</script>