vue怎么用v-bind給src和href賦值

這篇文章主要介紹了vue怎么用v-bind給src和href賦值的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇vue怎么用v-bind給src和href賦值文章都會有所收獲，下面我們一起來看看吧。

v-bind給src和href賦值

用v-bind給src和href賦值其實很簡單，即 v-bind:屬性名="name"，其中name就是data里json數據的鍵值，其簡寫形式為 :屬性名="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,圖片無法正常顯示

自己沒事敲點代碼，準備激發激發靈感，做一個好項目，順便復習下vue, 發現當我在data中模擬json數據的時候，圖片鏈接在頁面上無法正常顯示

用了各種方法，都無法正常使用，最后上網才發現是需要引入的問題。

附上代碼

// template
<img :src="imgLink" alt="">
// script
data () {
    return {
        // 注：引入之后，相對路徑及絕對路徑均可以使用
      imgLink: require("../../assets/img/home/recommend_bg.jpg")  
    }
},

關于“vue怎么用v-bind給src和href賦值”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么用v-bind給src和href賦值”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。