Vue数据绑定之for循环

最新推荐文章于 2024-02-06 15:40:29 发布

keli_Jun

最新推荐文章于 2024-02-06 15:40:29 发布

阅读量1.1k

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/Zero_uou/article/details/105934264

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、添加数据要绑定的数据

      data () {
        return {
          words: [
            {
              content: "耳朵终将遇到耳朵",
              date: "2020-05-05 9:49",
              author: "耳朵"
            },
            {
              content: "耳朵终将遇到耳朵",
              date: "2020-05-05 9:49",
              author: "耳朵"
            }
          ]
        }

二、在需要绑定循环的标签里加入 v-for

v-for="item in words" :key="item.id"

三、获取数据

<li v-for="item in words" :key="item.id" class="list-item">
          <el-card class="card-body" shadow="hover">
            <p class="card-word">{{item.content}}</p>
            <p><span class="card-date">{{item.date}}</span>
            <span class="card-author">by：{{item.author}}</span></p>
          </el-card>
        </li>

四、通过服务器加载数据

1.添加钩子函数（已挂载函数）

mounted: function () {  //钩子函数(已挂载)
        this.loadWords()
      },

2.调用加载函数

methods: {
        loadWords(){
          var _this = this
          this.$axios.get('/words').then(resp =>{
            if(resp && resp.status === 200){
              _this.words  = resp.data
            }
          })
        },