Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式
更新時間：2023年07月05日 14:16:52 作者：美奇開發(fā)工作室
這篇文章主要介紹了Vue.js中使用${}實現(xiàn)變量和字符串的拼接方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用${}實現(xiàn)變量和字符串的拼接
第1步、在data中定義變量（我定義的是comment對象）：
<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(`確定要刪除${this.comment.name}的評論嗎？`)) {
//這里省略實現(xiàn)刪除的方法
}
}
}
}
</script>注意了 ：window.confirm()里不是單引號，而是兩個 ` 號（esc下面的按鍵）。
在vue中實現(xiàn)字符串拼接為url連接
實現(xiàn)思路就是利用v-bind綁定屬性，就可以在href屬性中利用變量拼接出url
直接通過special_url+cls拼接出url。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue基礎ESLint?Prettier配置教程詳解，本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實現(xiàn)代碼格式規(guī)范?+?保存自動修復代碼js+vue2022-07-07
Vue中Class和Style實現(xiàn)v-bind綁定的幾種用法
項目開發(fā)中給元素添加/刪除 class 是非常常見的行為之一， 例如網(wǎng)站導航都會給選中項添加一個 active 類用來區(qū)別選與未選中的樣式，那么在 vue 中 我們如何處理這類的效果呢？下面我們就一起來了解一下2021-05-05
本文主要介紹了Vue如何設置el-table背景透明樣式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
隨著Vue3的日益成熟,越來越多的團隊開始考慮將現(xiàn)有Vue2項目升級到Vue3,作為一次重大版本更新,Vue3在帶來性能提升和新特性的同時,也引入了一些不兼容的變化,本文將全面解析Vue2到Vue3升級過程中需要注意的關鍵點,幫助你順利完成遷移,需要的朋友可以參考下2025-04-04
ElementUI修改實現(xiàn)更好用圖片上傳預覽組件
這篇文章主要為大家介紹了ElementUI修改實現(xiàn)更好用圖片上傳預覽組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本篇文章主要介紹了初步認識理解Vuex，Vuex就是在一個項目中，提供唯一的管理數(shù)據(jù)源的倉庫,有興趣的可以了解一下2017-04-04
文章介紹了如何在需求系統(tǒng)中創(chuàng)建一個位于頁面上方的公告展示組件,展示了如何在App.vue或其他頁面組件中使用這個公告組件,感興趣的朋友一起看看吧2025-01-01
element的el-upload組件上傳文件跨域問題的幾種解決
跨域問題網(wǎng)上搜索很多,感覺情況都不一樣,本文主要介紹了element的el-upload組件上傳文件跨域問題的幾種解決,具有一定的參考價值,感興趣的可以了解一下2024-03-03
vuejs2.0子組件改變父組件的數(shù)據(jù)實例
本篇文章主要介紹了vuejs2.0子組件改變父組件的數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Vue3項目剛創(chuàng)建就報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10