这篇文章主要介绍了vue怎么用v-bind给src和href赋值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么用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'
}
})
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赋值”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。