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)文章
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue2022-07-07
Vue中Class和Style實(shí)現(xiàn)v-bind綁定的幾種用法
項(xiàng)目開發(fā)中給元素添加/刪除 class 是非常常見的行為之一， 例如網(wǎng)站導(dǎo)航都會(huì)給選中項(xiàng)添加一個(gè) active 類用來區(qū)別選與未選中的樣式，那么在 vue 中 我們?nèi)绾翁幚磉@類的效果呢？下面我們就一起來了解一下2021-05-05
本文主要介紹了Vue如何設(shè)置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
隨著Vue3的日益成熟,越來越多的團(tuán)隊(duì)開始考慮將現(xiàn)有Vue2項(xiàng)目升級(jí)到Vue3,作為一次重大版本更新,Vue3在帶來性能提升和新特性的同時(shí),也引入了一些不兼容的變化,本文將全面解析Vue2到Vue3升級(jí)過程中需要注意的關(guān)鍵點(diǎn),幫助你順利完成遷移,需要的朋友可以參考下2025-04-04
ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件
這篇文章主要為大家介紹了ElementUI修改實(shí)現(xiàn)更好用圖片上傳預(yù)覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本篇文章主要介紹了初步認(rèn)識(shí)理解Vuex，Vuex就是在一個(gè)項(xiàng)目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下2017-04-04
文章介紹了如何在需求系統(tǒng)中創(chuàng)建一個(gè)位于頁面上方的公告展示組件,展示了如何在App.vue或其他頁面組件中使用這個(gè)公告組件,感興趣的朋友一起看看吧2025-01-01
element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-03-03
vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決
這篇文章主要介紹了Vue3項(xiàng)目剛創(chuàng)建就報(bào)錯(cuò)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10