vue实现用v-bind给src和href赋值
更新时间：2022年04月08日 15:23:58 作者：阳光之末亚
这篇文章主要介绍了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源码解读子节点优化更新示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue中内网/局域网/离线的情况下使用及建立项目方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
imba 是一种新的编程语言，可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下2019-06-06
vue的rules验证失效,部分可以部分又失效,很多百度都有,但是我这里遇到了一个特别的,那就是prop没有写全,导致验证某一个失效,接下来就跟小编一起来看看这个失效的原因和解决方案吧2023-11-11
这篇文章主要介绍了vue-cli3全面配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
在Vue-cli里应用Vuex的state和mutations方法
今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了使用ElementUI循环生成的Form表单添加校验，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
在Web开发中，有时候需要对网页进行截图或截屏，Vue作为一个流行的JavaScript框架，提供了一些工具和库，可以方便地实现网页截图和截屏功能，本文将介绍如何在Vue中进行网页截图和截屏,需要的朋友可以参考下2023-06-06
本文主要介绍了vue实现导入json解析成动态el-table树表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vue项目中封装axios的方法,axios 是一个轻量的 HTTP客户端，基于 XMLHttpRequest 服务来执行 HTTP 请求，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
最新评论