vue项目中将methods中的数据绑定到标签

可以采用在methods方法内给data赋值的方法也可以采用return的方法

1.给data赋值的方法

<template>
<div id="app3">
<div class="blue-back">
        <div class="left mall-name">悦动</div>
        <div class="left search"><input type="text"><span class="ion-android-search"></span></div>
        <div class="cel"></div>
        <!-- <div class="swiper-container">
          <ul class="carousel swiper-wrapper">
            <li class="swiper-slide"><img src="../../../static/assets/images/index02.jpg"></li>
            <li class="swiper-slide"><img src="../../../static/assets/images/index02.jpg"></li>
            <li class="swiper-slide"><img src="../../../static/assets/images/index02.jpg"></li>
          </ul>
           <div class="swiper-pagination"></div>
        </div> -->
    </div>
     <div class="goods-list">
            <div class="list" v-bind="indexLists" v-for="(item,key,index) in indexLists" :key="index">
              <div class="list-img"><img src="../../../static/assets/images/index02.jpg"></div>
              <div class="list-title">{{item.name}}</div>
              <div class="list-money">¥<span>{{item.price}}</span></div>
              <div class="list-integral">
                <div class="left">可获积分：</div>
                <div class="left">{{item.points}}</div>
                <div class="right">...</div>
                <div class="cel"></div>
              </div>
            </div>
            
            <div class="cel"></div>
        </div>
       
        <BlogBottomNav></BlogBottomNav>
</div>
    
</template>
<style scoped lang="less">
#app3{
        background-color: rgb(236, 236, 236);
        height: 100vh;
    }
</style>
<style>
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
</style>
<style src="../../../static/assets/css/swiper.min.css"></style>
<style src="../../../static/assets/css/index.css"></style>
<style src="../../../static/assets/css/common.css"></style>

<script>
import  BlogBottomNav from "@/components/common/BlogBottomNav.vue"

export default{
  name: 'BlogIndex',
  components: {BlogBottomNav},
  data:function(){
    return {
        indexLists:[],
    }
  },
  methods:{
     initswiper(){
       var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    })
     },
     goodsList(){
        this.$axios
            .post('pruductListByPageAndRow',{
                rows:5,
                page:2
            })
            .then(successResponse => {
                var indexList=successResponse.data.data.productList;
                if (successResponse.data.status =="success") {
                    console.log(indexList);
                    this.indexLists=indexList;
                }
                })
                .catch(failResponse => {}) // catch 阻止冒泡事件
     }
  },
  mounted:function(){
    this.goodsList();
  },
  // created:{
  //   this.initswiper
  // }
}
</script>

2.使用return的方法