Vue学习笔记-项目开发2.4图文列表展示（热门推荐为例）

图文列表显示

左图片，右显示详情等信息，主要涉及问题点在样式的编辑上，循环和之前一样

<template><div><div class="title">热销推荐</div><ul><liclass="item border-bottom"v-for="item of recomendList":key="item.id"><img class="item-img" :src="item.imgUrl" /><div class="item-info"><p class="item-title">{{ item.title }}</p><p class="item-desc">{{ item.desc }}</p><button class="item-button">查看详情</button></div></li></ul></div>
</template><script>
export default {name: 'HomeRecommend',data () {return {recomendList: [{id: '0001',imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.jpg',title: '厦门娱乐万岁',desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'}, {id: '0002',imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.jpg',title: '厦门娱乐万岁',desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'}, {id: '0003',imgUrl: 'http://img1.qunarzz.com/sight/p0/1901/7c/7cb1cca588241d6ba3.img.jpg_200x200_297820fb.jpg',title: '厦门娱乐万岁',desc: '谁说来厦门就要去鼓浪屿？其实不登鼓浪屿也有新玩法，去探寻你不知道的海底世界'}]}}
}
</script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eee
//文本缩进text-indent: .2rem.itemoverflow: hiddendisplay: flexhieght: 1.9rem.item-imgheight: 1.7remwidth: 1.7rempadding: .1rem.item-info
//所有子元素的长度相同flex: 1min-width: 0padding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff
</style>

Vue学习笔记-项目开发2.4图文列表展示（热门推荐为例）相关推荐

Vue学习笔记-项目开发2.5图文列表展示（周末去哪玩儿）
这个图文列表是上图下文字的形式,只是样式上的不同 <template><div><div class="title">周末去哪儿</div ...
vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至作者:狐狸家的鱼双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面页面->数据适用:input.select. ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
Vue学习笔记01——Vue开发基础
一.Vue实例配置选项选项说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目,这也是人生第一个真正的项目.刚做了一天,就遇到不少问题,在这里列出自己的问题与解决办法,与大家交流,提升自己,希望以后不会掉进同一个坑里. ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...

Vue学习笔记-项目开发2.4图文列表展示（热门推荐为例）

图文列表显示

Vue学习笔记-项目开发2.4图文列表展示（热门推荐为例）相关推荐

最新文章

热门文章