Vue使用v-for绑定两个属性拼接渲染界面

现在从数据库取回的数据中，要渲染的image的src是imageHost+mainImage：

拼接方式：

:thumb=“item.imageHost+’’+item.mainImage”

<!-- 商品列表 --><section class="product-list"><div class="product-container"><van-card v-for="(item,index) in products" :key="index" :data-i="item.id" :num="item.stock" :price="item.price" :desc="item.subtitle" :title="item.name" lazy-load="true" :thumb="item.imageHost+''+item.mainImage"  :origin-price="item.originalPrice" /></div></section>

Vue使用v-for绑定两个属性拼接渲染界面相关推荐

vue取消数据双向绑定问题
如图,由于vue数据的双向绑定,给waterSetInfo拼接单位的时候,会将res.data也进行赋值,导致waterSet里面的结果不对,同一个对象多处使用问题解决方案: 深拷贝的方法:JSON ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
vue实现数据双向绑定的基础之理解对象属性类型
原生JavaScript之理解对象 ECMA-262 把对象定义为:"无序属性的集合,其属性可以包含基本值.对象或者函数."严格来讲, 这就相当于说对象是一组没有特定顺序的值.对象 ...
vue绑定自定义属性（属性值:false），DOM不显示问题
(案例+截图 )vue绑定 :data-zidingyi="response.false" 之后,页面DOM 不显示正确的代码: <section v-for=" ...
Vue.js：vue指令（给标签属性赋Vue变量v-bind，绑定事件 v-on）vue事件处理函数中, 拿到事件对象，6个事件修饰符
1. 给标签属性赋Vue变量v-bind 在vue中,v-bind指令可以动态的给标签的属性设置值, 语法:v-bind:属性名="vue变量" 简写::属性名="vue ...
VUE学习一：初识VUE、指令、动态绑定、计算属性
文章目录导言一.01-初体验 1. ch01_helloworld.html 2. ==v-for指令==:ch02_vue列表展示_v-for.html 3. ==v-on指令==:ch03.1 ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
【Vue】Vue数据及事件绑定
文章目录 1. 数据绑定 1.1 单向绑定 1.1.1 插值绑定 1.1.2 v-bind绑定 1.2 双向绑定 2. 事件绑定与监听 2.1 方法及内联处理器 2.2 修饰符事件修饰符键值修饰符 ...
# 代码约架？Vue.js和Binding.scala两大框架作者的PK
作为一个知乎小透明,最近看了一场炸鱼大片.两天前,民工叔因为 Teambition 是 React 技术栈而离职一文,引发了激烈的讨论.其中民工叔偏向的技术选型Vue.js的作者出没现场黑了一把An ...

Vue使用v-for绑定两个属性拼接渲染界面

Vue使用v-for绑定两个属性拼接渲染界面相关推荐

最新文章

热门文章