【vue】v-for循环样式乱

vue中，使用v-for进行后端数据向前台渲染时，排好的版面错乱
原因：在li上使用v-for，而非ul

<ul><li v-for="(v,i) in data" :key="i"><img src="../../assets/everyday1.jpg" alt="" /><p>{{v.title}}</p><p>{{v.price}}</p></li>
</ul>

解决方法：在ul上写for循环

<ul v-for="(v,i) in data" :key="i"><li><img src="../../assets/everyday1.jpg" alt="" /><p>{{v.title}}</p><p>{{v.price}}</p></li>
</ul>

【vue】v-for循环样式乱相关推荐

Vue 之解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
一.简介官方文档: 通过上面官方文档的介绍我们可以得知两个重点: ① 通过v-html生成的页面元素,不会被当做Vue模板进行编译,只会作为普通的html代码被插入,也就是说通过v-html插入的h ...
html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
页面样式乱了，但是又感觉各种js，css都引入了
页面样式乱了,但是又感觉各种js,css都引入了怎么办: 一直不太清楚什么原因: <!DOCTYPE html> <html> <head> <meta c ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题
解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题参考文章: (1)解决Vue刷新一瞬间出现样式未加载完或者出现Vue代码问题 (2)https://www.cnblogs.com/jiah ...
vue使用v-for循环，动态修改element-ui的el-switch
在使用element-ui的el-switch中,因为要用v-for循环,一直没有成功,后来仔细查看文档,发现可以这样写 <el-switch v-for="(item, key) i ...
php v-for=,Vue中v-for循环节点的实现代码
本篇文章给大家带来的内容是关于Vue中v-for循环节点的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Title 父循环第一次子循环第一次 json数据的第几条数值 ...
[vue] 怎么使css样式只在当前组件中生效？
[vue] 怎么使css样式只在当前组件中生效? <style scoped> </style> 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
vue工程打包上线样式错乱问题 - bug解决（4种）
vue工程打包上线样式错乱问题 - bug总结(4种) 项目开发完成后,执行npm run build,进行打包,将打包完成的dist文件部署在服务器.配置好域名解析,就可以实现工程上线. 上线后,有 ...

【vue】v-for循环样式乱

【vue】v-for循环样式乱相关推荐

最新文章

热门文章