vue實(shí)現(xiàn)用v-bind給src和href賦值
v-bind給src和href賦值
用v-bind給src和href賦值其實(shí)很簡(jiǎn)單，即 v-bind:屬性名="name"，其中name就是data里json數(shù)據(jù)的鍵值，其簡(jiǎn)寫(xiě)形式為 :屬性名="name"。
示例
?<div id="app"> ? ? ? ? <a v-bind:href="link" rel="external nofollow" >link</a> ? ? ? ? <hr> ? ? ? ? <a v-bind:href="link1" rel="external nofollow" >link1</a> ? ? ? ? <hr> ? ? ? ? <a v-bind:href="link2" rel="external nofollow" >link2</a> ? ? ? ? <hr> ? ? ? ? <a href="linkyou.html" rel="external nofollow" >啦啦啦</a> ? ? ? ? <hr> ? ? ? ? <img :src="img" alt=""> ? ? </div> ? ? <script src="vue.js"></script> ? ? <script src="base.js"></script>
var ve2 = new Vue({
? ? el: '#app',
? ? data: {
? ? ? ? link: "linkyou.html",
? ? ? ? link1: "https//www.baidu.com",
? ? ? ? link2: "www.baidu.com",
? ? ? ? img: '8.jpg'
? ? }
})
v-bind:src無(wú)效問(wèn)題
vue中v-bind:src，圖片無(wú)法正常顯示
自己沒(méi)事敲點(diǎn)代碼，準(zhǔn)備激發(fā)激發(fā)靈感，做一個(gè)好項(xiàng)目，順便復(fù)習(xí)下vue, 發(fā)現(xiàn)當(dāng)我在data中模擬json數(shù)據(jù)的時(shí)候，圖片鏈接在頁(yè)面上無(wú)法正常顯示
用了各種方法，都無(wú)法正常使用，最后上網(wǎng)才發(fā)現(xiàn)是需要引入的問(wèn)題。
附上代碼
// template
<img :src="imgLink" alt="">
// script
data () {
? ? return {
? ? ?? ?// 注：引入之后，相對(duì)路徑及絕對(duì)路徑均可以使用
? ? ? imgLink: require("../../assets/img/home/recommend_bg.jpg") ?
? ? }
},以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法
這篇文章主要給大家分享的是vue項(xiàng)目實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的方法，vue-router是前端開(kāi)發(fā)中用來(lái)實(shí)現(xiàn)路由頁(yè)面跳轉(zhuǎn)的一個(gè)模塊。下面小編將帶來(lái)如何在已經(jīng)創(chuàng)建好的vue-router項(xiàng)目基礎(chǔ)下實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn),需要的朋友可以參考一下2021-11-11
在Vue開(kāi)發(fā)過(guò)程中解決和預(yù)防內(nèi)存泄漏問(wèn)題的方法詳解
Vue作為一款流行的前端框架,已經(jīng)在許多項(xiàng)目中得到廣泛應(yīng)用,然而,隨著我們?cè)赩ue中構(gòu)建更大規(guī)模的應(yīng)用程序,我們可能會(huì)遇到一個(gè)嚴(yán)重的問(wèn)題,那就是內(nèi)存泄漏,因此,我們需要認(rèn)識(shí)到在Vue開(kāi)發(fā)過(guò)程中,內(nèi)存泄漏問(wèn)題的重要性,本文將給大家介紹如何解決和預(yù)防內(nèi)存泄漏問(wèn)題2023-10-10
vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能
這篇文章主要介紹了vue draggable resizable 實(shí)現(xiàn)可拖拽縮放的組件功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性
這篇文章主要介紹了vue如何給element-ui中的el-tabs動(dòng)態(tài)設(shè)置label屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼
下面小編就為大家分享一篇使用mint-ui實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)效果的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue-resource:jsonp請(qǐng)求百度搜索的接口示例
今天小編就為大家分享一篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對(duì)地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲(chǔ)到form對(duì)象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下2024-02-02
Vue實(shí)現(xiàn)各種類(lèi)型文件的預(yù)覽功能
這篇文章主要介紹了如何在Vue3中使用aceEditor插件和vue-ipynb插件實(shí)現(xiàn)不同類(lèi)型的文件預(yù)覽,包括txt、md、json、pkl、mps、py、ipynb、doc、docx、pdf、xlsx、csv等文件,需要的朋友可以參考下2025-03-03
最近在做APP客戶(hù)端掃描PC端二維碼登錄,于是記錄一下實(shí)現(xiàn)過(guò)程,下面這篇文章主要給大家介紹了關(guān)于Vue?PC前端掃碼登錄功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12