先来一行代码:

<div class="swiper-slide" v-for="item in message">
  <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" />
</div>

如代码所示,只需要在数组语法中拼接字符串即可。

***知识点***

顺便总结一下vue语法

写法也分为:style的绑定和class的绑定

(以下代码部分为官网例子)

(1)对象语法

顾名思义,就是有使用对象写法的语法

style绑定:

这类写法和css写法类似

class绑定:

active是类名,isActive为true的时候active有效

(2)数组语法

style绑定:

<div :style="[style1,style2,style3]"></div>

data写法官网没介绍,我这边简单写一下例子:

data: {
    style1:{background:'red'},
    style2:{width:'100px'},
    style3:{height:'100px'}
  }

class绑定:

vue语法之拼接字符串的更多相关文章

  1. es6语法之模版字符串

    //es6语法之`${}`以及vue语法 `${ }` (模版字符串)const name = '小缘' const age = 14 console.info(`大家好,我叫${name},今年${ ...

  2. vue动态绑定src加字符串拼接

    关键点 1.img中的src的字符串动态拼接 2.style中的background属性赋值 一.img中的src的字符串动态拼接 1.问题是这样子的,瞧瞧 基本网络链接 : http://openw ...

  3. sql server中单引号拼接字符串(书写错误会出现错误"浮点值 XXXX 超出了计算机表示范围(8 个字节)。“XX”附近有语法错误。")

    " ' "(单引号)的运用:在sql server中,两个" ' "(单引号)在拼接字符串的情况下运用,就是表示拼接上了一个" ' "单引号 ...

  4. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. razor 拼接字符串

    在asp.net引擎中 拼接字符串可以这样写 <script src="~/script/<%=scriptname%>.js"></script&g ...

  6. vue语法精简(方便开发查阅)

    vue语法精简(方便开发查阅) 指令 特殊的标签和属性 变异方法 事件修饰符 按键修饰符 表单修饰符 生命周期函数 计算属性 监听属性 子组件通过事件向父组件传递信息 在组件上使用v-model 动画 ...

  7. 分组拼接字符串,GROUP_CONCAT

    背景 一年过的很快,文中后来的两位员工 馮大 和 馮二 也要面对无情的 KPI 考核了,他们工作干的很不错,performance 分别是 4 和 5 新需求来了,静悄悄的来了!!! 领导想要查看每个 ...

  8. 昨天还在for循环里写加号拼接字符串的那个同事,今天已经不在了

    引言 都说 StringBuilder 在处理字符串拼接上效率要强于 String,但有时候我们的理解可能会存在一定的偏差.最近我在测试数据导入效率的时候就发现我以前对 StringBuilder 的 ...

  9. 2. Vue语法--插值操作&动态绑定属性 详解

    目录 1. 设置vue模板 2. vue语法--插值操作 3. 动态绑定属性--v-bind 一. 设置vue模板 我们经常新建一个vue项目的时候, 会写如下的一段代码 <!DOCTYPE h ...

随机推荐

  1. ASP.NET Core 运行原理解剖[4]:进入HttpContext的世界

    HttpContext是ASP.NET中的核心对象,每一个请求都会创建一个对应的HttpContext对象,我们的应用程序便是通过HttpContext对象来获取请求信息,最终生成响应,写回到Http ...

  2. UI设计基础知识和JavaScript

    [PS基础案例] 人物修图.调整画布大小,建立3个图层,并列放到画布中,用修补工具修掉中间的人物,再用橡皮章盖掉边缘的人物,然后扣出人物,放上新的蓝天,用橡皮擦调整透明度,擦掉水天交接的地方,然后调整 ...

  3. SessionStateMode之SQL Server共享session

    分布式应用首先要解决的是跨域的问题,解决session.frame.cookie的跨域是最基本的,然后才是负载均衡和性能优化,上面的不解决就没法往后面进行.上一博客主要是解决了frame跨域的问题,今 ...

  4. vue.js移动端app实战4:上拉加载以及下拉刷新

    上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几 ...

  5. Linux的netstat查看端口是否开放见解(0.0.0.0与127.0.0.1的区别)

    linux运维都需要对端口开放查看  netstat 就是对端口信息的查看 # netstat -nltp p 查看端口挂的程序 [root@iz2ze5is23zeo1ipvn65aiz ~]# n ...

  6. Java异常的性能分析

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt276 在Java中抛异常的性能是非常差的.通常来说,抛一个异常大概会消耗10 ...

  7. 【转】Spring AOP 实现之CGLIB

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp91    cglib(Code Generation Library)是 ...

  8. STM32—无需中断来实现使用DMA接收串口数据

    本节目标: 通过DMA,无需中断,接收不定时长的串口数据 描述:当在串口多数据传输下,CPU会产生多次中断来接收串口数据,这样会大大地降低CPU效率,同时又需要CPU去做其它更重要的事情,我们应该如何 ...

  9. .net asp mvc 如何从后端返回数据对象

    今天在做项目时,有一个需求:获取从控制器返回的数组对象,方法如下 public ActionResult GetAllFiles() { string dir = Server.MapPath(&qu ...

  10. 通信原理课程设计Javaswing技术计算出PCM编码——猎八哥FLY

    package keshe; import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; ...