vue实现用v-bind给src和href赋值

目录
  • v-bind给src和href赋值
    • 示例
  • v-bind:src无效问题
    • 附上代码

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")  
    }
},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue指令 v-bind的使用和注意需要注意的点

    vue指令 v-bind的使用和注意需要注意的点

    目录 1.v-bind:可以为元素的属性绑定一些数据 2.v-bind:可以简写成 : 推荐直接写冒号 3.v-bind:指令表达式的拼接, 1.v-bind:可以为元素的属性绑定一些数据 <div id="app"> <p v-bind:title="message" v-bind:id="pId">我是p标签</p> </div> <script src="./js/vue.js

  • 详解VueJs中的V-bind指令

    引子 v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>   一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑

  • 详解VUE中v-bind的基本用法

    这两天学习了v-bind的基本用法,所以,今天添加一点小笔记. 1. v-bind:class(根据需求进行选择) 1.1 <style> .box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; } </style> <div id="app"> <span class="box" :class="

  • vue.js学习笔记之v-bind和v-on解析

    v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href; v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"

  • vue实现用v-bind给src和href赋值

    目录 v-bind给src和href赋值 示例 v-bind:src无效问题 附上代码 v-bind给src和href赋值 用v-bind给src和href赋值其实很简单,即 v-bind:属性名="name",其中name就是data里json数据的键值,其简写形式为 :属性名="name". 示例  <div id="app">         <a v-bind:href="link" rel=&quo

  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台,采用Vue+SpringBoot开发. 演示地址: http://45.77.146.32:8081/index.html 项目地址: https://github.com/lenve/VBlog 登陆页面 文章列表 发表文章 用户管理 栏目管理 数据统计 技术栈 后端技术栈 后端主要采用了: 1.SpringBoot 2.SpringSecurity 3.MyBatis 4.部分接口遵循Restful风格 5.MySQL 前端技术栈 前端主要采用了: 1.Vue

  • Vue.js 动态为img的src赋值方法

    需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti

  • vue之webpack -v报错解决方案总结

    小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装 cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧. cnpm install -g webpack 等一会安装成功了,我就想看一下webpack 的版本 又提示我要安装webpack-cli,那就安装吧 cnpm install -g webpack-cli 等一会就安装好了,再看一下webpack -v就报下面的错了. $ webpack -v C:\Users\Administrator\AppDa

  • Vue实现鼠标悬浮切换图片src

    Vue实现鼠标悬浮切换图片src

    本文实例为大家分享了Vue实现鼠标悬浮切换图片src的具体代码,供大家参考,具体内容如下 需求: 1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮2. 鼠标离开图示按钮,图片切换成回白色按钮 Html部分: <!-- 如果此处的两个鼠标事件不生效,可以在mouseenter后面添加.native后缀 --> <div class="left-btn"      @click="saveTemplate()"      @mouseenter=&qu

  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    1.使用Vue.js实现双向表单数据绑定,例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r

  • vue中内嵌iframe的src更新页面未刷新问题及解决

    目录 vue内嵌iframe的src更新页面未刷新 原因 解决 iframe的src指向的内容不刷新的解决方法之一 总结 vue内嵌iframe的src更新页面未刷新 vue中,系统使用iframe内嵌了其他系统的页面,iframe的src修改了,但是iframe内部页面内容未更新,也未请求接口. 原因 iframe的src中如果带hash #,src改变是不会刷新的. 解决 方式一:可以在 # 号前加一个随机数或者时间戳,但这种方式会改变url:方式二:在组件上加key,强制刷新页面. 方式一

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • vue中img src 动态加载本地json的图片路径写法

    vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • vue render函数动态加载img的src路径操作

    分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e

随机推荐