Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式
更新時(shí)間：2023年07月05日 14:16:52 作者：美奇開發(fā)工作室
這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
使用${}實(shí)現(xiàn)變量和字符串的拼接
第1步、在data中定義變量（我定義的是comment對(duì)象）：
<script>
export default {
data() {
return {
comment: {
name: '張三',
content: '哈哈哈，Vue.js挺好用的。'
}
}
}
}
</script>第2步、在字符串中使用${}拼接變量
<template>
<li class="list-group-item">
<div class="handle">
<a href="javascript:;" rel="external nofollow" @click="del">刪除</a>
</div>
<p class="name"><span>{{comment.name}}</span><span>說:</span></p>
<p class="content">{{comment.content}}</p>
</li>
</template>
<script>
export default {
data() {
return {
comment: {
name: '張三',
content: '哈哈哈，Vue.js挺好用的。'
}
}
},
methods: {
del() {
alert(this.comment.name);
if(window.confirm(`確定要?jiǎng)h除${this.comment.name}的評(píng)論嗎？`)) {
//這里省略實(shí)現(xiàn)刪除的方法
}
}
}
}
</script>注意了 ：window.confirm()里不是單引號(hào)，而是兩個(gè) ` 號(hào)（esc下面的按鍵）。
在vue中實(shí)現(xiàn)字符串拼接為url連接
實(shí)現(xiàn)思路就是利用v-bind綁定屬性，就可以在href屬性中利用變量拼接出url
直接通過special_url+cls拼接出url。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁(yè)面的數(shù)據(jù)，帶樣式，也就是說好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11
vue中keep-alive內(nèi)置組件緩存的實(shí)例代碼
這篇文章主要介紹了vue中的keep-alive內(nèi)置組件緩存，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解
這篇文章主要介紹了vue.js踩坑之ref引用細(xì)節(jié)點(diǎn)講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue無限輪播插件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了Vue3是如何實(shí)現(xiàn)加載動(dòng)態(tài)菜單功能的，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定幫助，需要的可以參考一下2022-07-07
作為使用Vue的開發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚2023-04-04
詳解vue.js移動(dòng)端配置flexible.js及注意事項(xiàng)
最近在用vue做移動(dòng)端項(xiàng)目，網(wǎng)上找了一些移動(dòng)端適配的方案，個(gè)人覺得手淘團(tuán)隊(duì)flexible.js還是比較容易上手，在這里做下總結(jié)。對(duì)vue.js移動(dòng)端配置flexible.js 相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2019-04-04
vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能
使用 intro.js這個(gè)插件,來實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧2024-06-06
如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06