关于 artistic.vue 笔记

Question

其实，老师基本上都写好了，我只是删删减减代码而已，分享给 目前还没有头绪的同学：

<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>有格调</dt>
      <dd
        :class="{active:kind==='all'}"
        kind="all"
        keyword="景点">全部</dd>
      <dd
        :class="{active:kind==='part'}"
        kind="part"
        keyword="美食">约会聚餐</dd>
      <dd
        :class="{active:kind==='spa'}"
        kind="spa"
        keyword="丽人">丽人SPA</dd>
      <dd
        :class="{active:kind==='movie'}"
        kind="movie"
        keyword="电影">电影演出</dd>
      <dd
        :class="{active:kind==='travel'}"
        kind="travel"
        keyword="旅游">品质出游</dd>
    </dl>
    <ul class="ibody">
      <li v-for="item in cur" :key="item.title">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.img" class="image">
          <ul class="cbody">
            <li class="title">{{ item.title }}</li>
            <li class="pos"><span>{{ item.pos }}</span></li>
            <li class="price">￥<em>{{ item.price }}</em><span>/起</span></li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  data() {
    return {
      kind: 'all',
      list: {
        all: [
          {
            title: '北京三里屯通盈中心洲际酒店',
            pos: '學校周邊-a',
            price: Math.ceil(Math.random() * 1000),
            img:'https://p1.meituan.net/tdchotel/8d2d8549f205d79fbc2319f65ac1ff821861291.png@368w_208h_1e_1c',
            url:'//abc.com',
          },
        ],

        part: [
           {
            title: '日坛宾馆',
            pos: '學校周邊-b',
            price: Math.ceil(Math.random() * 100),
            img:'https://p1.meituan.net/tdchotel/db53eed65ed6d0dfb83699c6608a9ff5182551.jpg@368w_208h_1e_1c',
            url:'//abc.com',
          },
        ],

        spa: [
           {
            title: '向东方花园国际酒店',
            pos: '學校周邊-c',
            price: Math.ceil(Math.random() * 100),
            img:'https://p0.meituan.net/tdchotel/1747e5e250fb0ce26d19261bbec4c88e453877.jpg@368w_208h_1e_1c',
            url:'//abc.com',
          },
        ],

        movie: [
           {
            title: '北京维景国际大酒店',
            pos: '學校周邊-d',
            price: Math.ceil(Math.random() * 100),
            img:'https://p0.meituan.net/dnaimgdark/07c40e67bc073d082f9d1c9d562432292881497.jpg@368w_208h_1e_1c',
            url:'//abc.com',
          },
        ],

        travel: [
           {
            title: '北京建国门CBD亚朵轻居酒店',
            pos: '學校周邊-f',
            price: Math.ceil(Math.random() * 100),
            img:'https://p0.meituan.net/dnaimgdark/3737ac5604a945aa3dbcdb0247254e033254777.jpg@368w_208h_1e_1c',
            url:'//abc.com',
          },
        ]
      }
    }
  },

  computed: {
    cur: function () {
      return this.list[this.kind];
    }
  },

  // async mounted() {
  //   let self=this;
  //   let { status,data:{count,pois} } = await self.$axios.get('/search/resultsByKeywords',{
  //     params:{
  //       keyword:'景点',
  //       city:self.$store.state.geo.position.city
  //     }
  //   })
  //   if(status===200 && count>0){
  //     let r= pois.filter(item=>item.photos.length).map(item=>{
  //       return {
  //         title:item.name,
  //         pos:item.type.split(';')[0],
  //         price:item.biz_ext.cost||'暂无',
  //         img:item.photos[0].url,
  //         url:'//abc.com'
  //       }
  //     })
  //     self.list[self.kind]=r.slice(0,9)
  //   }else{
  //     self.list[self.kind]=[]
  //   }
  // },

  methods: {
   over:function (e) {
      let dom = e.target;
      let tag = dom.tagName.toLowerCase();
      let self = this;
      if (tag === 'dd') {
        this.kind = dom.getAttribute('kind');
        let keyword = dom.getAttribute('keyword');
      };
    }
  },
}
</script>
<style lang="scss">
    @import "@/assets/css/index/artistic.scss";
</style>

（建议先自己想一想，在复制代码）

Answer 1

提问者 慕小庄 2019-11-26 16:23:21

1. 老师不好意思，因为笔记不能贴这么多，所以问答当笔记使用

2. 目前我测试是成功的，如果有想不出来，在复制代码，建议先自己想一下在来复制。

• 快乐动起来呀 #1

  同学咱们有专门记笔记的地方哈