<template> <div class="goods"> <div class="menu-wrapper"> <ul> <li v-for="item in goods"> <span class="text"> <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> <div class="foods-wrapper"></div> </div> </template> <script type="text/ecmascript-6"> import axios from 'axios'; const ERR_OK = 0; export default { props: { seller: { type: Object } }, data() { return { goods: [] }; }, created() { this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special']; var that = this; axios.get('api/goods').then(function(response) { response = response.data; if (response.errno === ERR_OK) { that.goods = response; console.log(that.goods); } }).catch(function (error) { console.log(error); }); } }; </script> <style lang="stylus" rel="stylesheet/stylus"> .goods display flex position absolute top 174px bottom 46px width: 100% overflow hidden .menu-wrapper flex 0 0 80px width 80px background #f3f5f7 .goods-wrapper flex 1 </style>
掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp
了解课程