vue语法之拼接字符串

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue语法之拼接字符串相关的知识,希望对你有一定的参考价值。

先来一行代码:

<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语法之拼接字符串的主要内容,如果未能解决你的问题,请参考以下文章

javascript es6新增语法之`${}`

Vue入门基础

VUE +Element 实现多个字段值拼接

vue2.0 代码功能片段

vue字符串拼接

es6新增在vue中常用语法