十三.Vue列表渲染

十三.Vue列表渲染
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

一.Vue初体验:https://blog.csdn.net/qq_43674132/article/details/104857216

二.Vue条件命令:https://blog.csdn.net/qq_43674132/article/details/104857322

三.Vue循环指令:https://blog.csdn.net/qq_43674132/article/details/104857517

四.Vue处理用户输入:https://blog.csdn.net/qq_43674132/article/details/104857651

五.Vue组件初体验:https://blog.csdn.net/qq_43674132/article/details/104857870

六.Vue实例:https://blog.csdn.net/qq_43674132/article/details/104857953

七.Vue模板语法:https://blog.csdn.net/qq_43674132/article/details/104858009

八.Vue计算属性:https://blog.csdn.net/qq_43674132/article/details/104858068

九.Vue.js侦听器:https://blog.csdn.net/qq_43674132/article/details/104860083

十.Vue.js的class绑定:https://blog.csdn.net/qq_43674132/article/details/104861826

十一.Vue style绑定:https://blog.csdn.net/qq_43674132/article/details/104877107

十二.Vue 条件渲染:https://blog.csdn.net/qq_43674132/article/details/104877177

十三.Vue 列表渲染:https://blog.csdn.net/qq_43674132/article/details/104877393

十四.Vue事件处理:https://blog.csdn.net/qq_43674132/article/details/104878173

十五.Vue表单输入绑定:https://blog.csdn.net/qq_43674132/article/details/104879776

十六.Vue中引用图片:https://blog.csdn.net/qq_43674132/article/details/107043105

使用v-for遍历数组对象

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用book in books形式的特殊语法,其中 books 是源数据数组,而 book 则是被迭代的数组元素的别名。具体操作如下代码

data:{
            books:[
                {
                    name:"三国演义",
                    author:"罗贯中"
                },
                {
                    name:"西游记",
                    author:"吴承恩"
                },
                {
                    name:"水浒传",
                    author:"施耐庵"
                },
                {
                    name:"红楼梦",
                    author:"曹雪芹"
                }
            ]
        }
<table border="1">
        <!--第一行-->
        <tr>
            <td>循环下标</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        <!--books:要遍历的数组元素 book:每一个要遍历元素的别名,book想当于是book里面的每一个对象-->
        <!--除了book,还可以加一个下标:index  in也可以改成of-->
        <!--v-for既可以遍历数组对象,也可以遍历普通对象-->
        <tr v-for="(book,index) in books" v-bind:key="index">
            <td>{
  {index}}</td>
            <td>{
  {book.name}}</td>
            <td>{
  {book.author}}</td>
        </tr>
    </table>

循环数组对象浏览器显示如下

image.png

在 v-for 块中,我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数,即当前项的索引。

<tr v-for="(book,index) in books" v-bind:key="index">
            <td>{
  {index}}</td>
            <td>{
  {book.name}}</td>
            <td>{
  {book.author}}</td>
        </tr>

使用v-for遍历单个对象

data:{
            site:{
                url:"https://lqgjava.github.io/",
                name:"凌枫博客",
                server:"github"
            }
        }
<div v-for="(s,p,index) in site" v-bind:key="index">{
  {s}}--{
  {p}}--{
  {index}}</div>

单个对象遍历浏览器显示如下

image.png

你也可以提供第二个的参数为 property 名称 (也就是键名):下面代码的p就是键名

<div v-for="(s,p,index) in site" v-bind:key="index">{
  {s}}--{
  {p}}--{
  {index}}</div>

数组更新检测

变异方法

Vue 将被侦听的数组的变异方法进行了包裹,所以它们也将会触发视图更新。这些被包裹过的方法包括:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开控制台,然后对前面例子的 books 数组尝试调用变异方法。比如 app.books.push({name:"斗破苍穹",author:"天蚕土豆"})

image.png

详细代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <!--第一行-->
        <tr>
            <td>循环下标</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        <!--books:要遍历的数组元素 book:每一个要遍历元素的别名,book想当于是book里面的每一个对象-->
        <!--除了book,还可以加一个下标:index  in也可以改成of-->
        <!--v-for既可以遍历数组对象,也可以遍历普通对象-->
        <tr v-for="(book,index) in books" v-bind:key="index">
            <td>{
  {index}}</td>
            <td>{
  {book.name}}</td>
            <td>{
  {book.author}}</td>
        </tr>
    </table>
    <hr>
    <!--也可以拿到属性的key-->
    <!--遍历普通对象-->
    <div v-for="(s,p,index) in site" v-bind:key="index">{
  {s}}--{
  {p}}--{
  {index}}</div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            books:[
                {
                    name:"三国演义",
                    author:"罗贯中"
                },
                {
                    name:"西游记",
                    author:"吴承恩"
                },
                {
                    name:"水浒传",
                    author:"施耐庵"
                },
                {
                    name:"红楼梦",
                    author:"曹雪芹"
                }
            ],
            site:{
                url:"https://lqgjava.github.io/",
                name:"凌枫博客",
                server:"github"
            }
        }
        });
</script>
</body>
</html>

 

本文来源凌枫zero,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/8023

发表评论