博客

三，vue的基础语法之循环遍历

  • Post author:
  • Post category:vue

vue官网中用v-for来进行列表渲染。
这张主要是v-for来遍历数组和遍历对象。

v-for 遍历数组

  • 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成
  • v-for的语法类似于JavaScript中的for循环
  • 格式如下：item in items的形式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
    <li v-for="name in names">{{name}}</li>
    </ul>

    <!--获取索引值-->
    <ul>
        <li v-for="(name,index) in names">{{index+1}}.{{name}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                names: [
                    'xiaojian','yuzijun','kobe','james'
                ]
            }
        })
</script>

</body>
</html>

v-for遍历对象

  • 如果某个对象中存储着你的个人信息，我们希望以列表的形式显示出来
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--获取值-->
    <ul>
        <li v-for="item in info">{{item}}</li>
    </ul>

    <!--获取key和value-->
    <ul>
        <li v-for="(item,key) in info">{{item}}-{{key}}</li>
    </ul>

    <!--获取key和value和index-->
    <ul>
        <li v-for="(item,key,index) in info">{{item}}-{{key}}-{{index}}</li>
    </ul>


</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                info:{
                    name: 'xiaojian',
                    age: 18,
                    sex: '男'
                }
            }
        })
</script>

</body>
</html>

循环遍历中数据方法的响应式

  • 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。
  • Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in books">{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
    var app= new Vue({
            el: "#app",
            data: {
                books: ['红楼梦','三国','西游记','水浒']
            },
            methods:{
                btnClick(){
                    //1. push()
                    // this.books.push('红楼梦新')

                    //2. pop() 删除最后一个元素
                    // this.books.pop()

                    //3. shift() 删除第一个元素
                    // this.books.shift()

                    //4.unshift() 在数组最前面插入元素
                    // this.books.unshift('红楼梦新')

                    //5.splice 删除元素/插入元素/替换元素

                    //删除元素  第一个参数代表从index开始，第二个参数代表后面删除几个元素
                    //若没有第二个参数  则删除后面所有的元素
                    //this.books.splice(1,2)

                    //替换元素 第一个参数代表从第几个元素开始  第二个元素代表替换几个
                    // this.books.splice(1,3,'m','n','z','b')

                    //插入元素
                    // this.books.splice(1,0,'a','b','c')

                    //6.sort()
                    // this.books.sort()

                    //7.reverse()
                   // this.books.reverse()


                    //z注意：通过索引值修改元素的内容  不能响应式交互
                    this.books[0]='aaa'

                    //this.books.splice(0,1,'aaa')
                }
            }
        })
</script>

</body>
</html>
版权声明：本文为weixin_44731169原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。