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赋值”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注云搜网行业资讯频道。