快捷導(dǎo)航

vue語(yǔ)法之拼接字符串的示例代碼

更新時(shí)間：2017年10月25日 09:50:09 作者：一曲笙簫

本篇文章主要介紹了vue語(yǔ)法之拼接字符串的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹了vue語(yǔ)法之拼接字符串的示例代碼，分享給大家，具體如下。

先來(lái)一行代碼：

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

如代碼所示，只需要在數(shù)組語(yǔ)法中拼接字符串即可。

***知識(shí)點(diǎn)***

順便總結(jié)一下vue語(yǔ)法

寫(xiě)法也分為：style的綁定和class的綁定

（以下代碼部分為官網(wǎng)例子）

(1)對(duì)象語(yǔ)法

顧名思義，就是有使用對(duì)象寫(xiě)法的語(yǔ)法

style綁定：

這類(lèi)寫(xiě)法和css寫(xiě)法類(lèi)似

class綁定：

active是類(lèi)名，isActive為true的時(shí)候active有效

(2)數(shù)組語(yǔ)法

style綁定:

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

data寫(xiě)法官網(wǎng)沒(méi)介紹，我這邊簡(jiǎn)單寫(xiě)一下例子：

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

class綁定:

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)
這篇文章主要介紹了詳解vue-router數(shù)據(jù)加載與緩存使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
Vue源碼cached解析
最近在寫(xiě)閉包的應(yīng)用的時(shí)候，出現(xiàn)了一個(gè)cached函數(shù)，來(lái)源于Vue源碼，利用了閉包變量不會(huì)被回收的特點(diǎn)，可以緩存變量，cached本質(zhì)上是一個(gè)高階函數(shù)，它接受一個(gè)函數(shù)的參數(shù)，同時(shí)返回一個(gè)函數(shù)
2022-08-08
Vue 購(gòu)物車(chē)案例練習(xí)
這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車(chē)案例的小練習(xí)，文章個(gè)悲劇購(gòu)物車(chē)為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過(guò)程,需要的朋友可以參考一下文章的具體內(nèi)容
2021-10-10
如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題
這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例詳細(xì)講解
這篇文章主要介紹了Vue使用Echarts實(shí)現(xiàn)大屏可視化布局示例，本文通過(guò)實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
:visible.sync 的作用詳解
我們?cè)谇岸碎_(kāi)發(fā)中經(jīng)?？吹?visible.sync這種修飾符，很多人不知道這是干什么的，在使用ElementUI的時(shí)候，里面有個(gè)彈窗el-dialog組件的時(shí)候會(huì)有用到:visible.sync，今天小編帶領(lǐng)大家學(xué)習(xí)下:visible.sync 的作用，感興趣的朋友一起看看吧
2022-11-11
vue跳轉(zhuǎn)頁(yè)面的幾種常用方法實(shí)例總結(jié)
Vue是一種流行的JavaScript框架,用于構(gòu)建用戶界面,在Vue中,頁(yè)面跳轉(zhuǎn)通常使用路由(Router)來(lái)實(shí)現(xiàn),除此之外還有很多方法,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁(yè)面的幾種常用方法,需要的朋友可以參考下
2024-05-05
vue在.js文件中引入store和router問(wèn)題
這篇文章主要介紹了vue在.js文件中引入store和router問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue實(shí)現(xiàn)打卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)打卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue上傳組件vue Simple Uploader的用法示例
本篇文章主要介紹了Vue上傳組件vue Simple Uploader的用法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-08-08