Detailed explanation of Vue syntax splicing strings

This article mainly introduces the sample code for splicing strings in Vue syntax. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Let’s start with a line of code:

<p class="swiper-slide" v-for="item in message">
　　<img src="/static/imghwm/default1.png"  data-src="[&#39;xxx(需要拼接的字符串)&#39;+item.picurl]"  class="lazy"  v-bind: alt=""    style="max-width:90%"  style="max-width:90%" />
</p>

As shown in the code, you only need to concatenate strings in the array syntax.

***Knowledge points***

By the way, let’s summarize the vue syntax

The writing method is also divided into: style Binding and class binding

(The following code part is an example from the official website)

(1)Object syntax

As the name suggests, there are objects to use The syntax of writing

style binding:

This type of writing is similar to css writing

class binding:

active is the class name, active is valid when isActive is true

(2) Array syntax

style binding:

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

data is not introduced on the judge website. I will briefly write an example here:

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

class binding:

Related recommendations:

javascript: concatenating string function concat()

javascript - PHP splicing strings calling js

Comparative test on the efficiency of JavaScript combination splicing strings_javascript skills

The above is the detailed content of Detailed explanation of Vue syntax splicing strings. For more information, please follow other related articles on the PHP Chinese website!