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