• 固定路径(原始html)

    index.html如下,其中,引号""里面就是图片的路径地址

    ```<img src="./assets/1.png">
    ```

  • 单个可变路径

    index.html如下

    ```<div id="app">
    <img v-bind:src="imgSrc">
    </div>
    ```

    对应地,app里面要有src,

    ```

    var app = new Vue({
    el: '#app',
    data: {
    imgSrc: './assets/2.png'
    }
    }
    ```

    这样就可以通过改变imgSrc来改变某一个img标签指向的图片了

  • basePath + 参数

    比如有10张图片放在./assets/目录中,图片名1.png, 2.png ...

    Vue的文档里面有这么一句话

    Vue.js allows you to define filters that can be used to apply common text formatting.

    因此需要借助filter。html如下,其中img_id是图片名中的数字,如1,2,3... 而getImage是filter中的一个key

    ```<div id="app">
    <img v-bind:src="img_id | getImage">
    </div>
    ```

    Vue的options要添加filters

    ```

    var app = new Vue({
    el: '#app',
    data: {
    imgSrc: './assets/2.png'
    },

    // text formatting
    filters: {
    getImage: function(teamId){
    return `./assets/${teamId}.png`
    }
    },
    }
    ```

原文地址:https://segmentfault.com/a/1190000013090116

Vue.js 笔记之 img src的更多相关文章

  1. vue.js笔记总结

    一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...

  2. 珠峰2016,第9期 vue.js 笔记部份

    在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm  init  ...

  3. vue.js笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...

  4. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  5. vue.js笔记1.0

    事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...

  6. vue.js 笔记

    <!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{it ...

  7. node npm vue.js 笔记

    cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.n ...

  8. Vue.js基础 笔记

    Vue.js的声明: < script src = “https://unpkg.com/vue” ></ script > el:值可以是CSS选择符.HTML元素.或者是返 ...

  9. 初试 Vue.js

    1.为什么我会想要来弄弄vue这个前端框架呢? 答:前段时间被小程序刷屏了,然后就去弄了一下小程序,嗯挺简单的:头脑一发热后就想到vue2也发布一段时间了,何不也来尝尝vue2.0的味道,最后发现它们 ...

随机推荐

  1. Python3爬虫环境配置

    一.包管理工具Anaconda安装 1.安装直接在官网下载最新版本的 https://www.continuum.io/downloads 2.配置环境变量PATH:C:\Users\Administ ...

  2. 阻止a标签跳页,使用单击事件函数处理该请求

    阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页   使用单击事件函数来处理该单击请求  返回上一层页面 ---------------- ...

  3. CF369E. ZS and The Birthday Paradox

    /* cf369E. ZS and The Birthday Paradox http://codeforces.com/contest/711/problem/E 抽屉原理+快速幂+逆元+勒让德定理 ...

  4. GROUP BY 和 ORDER BY 的一起使用

    GROUP BY 和 ORDER BY一起使用 写程序也有很长的一段时间了,有些东西我总不曾去思考,很少去积累一些有用的东西,总喜欢"用要即拿"的心态来对待,这是非常不好的坏习惯. ...

  5. asp.net mvc--传值-前台->后台

    前端传值->后端 一.Model Binding 方式 前台 @model ADMgr.Web.Models.ListModel 后台 [HttpPost] public ActionResul ...

  6. @responsebody注解的作用就是让viewresolver不起作用,不返回视图名称而是直接返回的return object

    @responsebody注解的作用就是让viewresolver不起作用,不返回视图名称而是直接返回的return object 2.也可以再方法上添加@ResponseBody注解, 用于这个类里 ...

  7. rails create方法ActiveModel::ForbiddenAttribute的问题

    rails create方法ActiveModel::ForbiddenAttribute的问题 def create @ad = Ad.new(ad_params) @ad.save end pri ...

  8. codecombat之KithGard地牢19-37关代码分享

    codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19 ...

  9. hadoop无法启动DataNode问题

    因为种种原因,今天又一次安装hadoop集群.清空了/tmp下的文件夹,重新启动集群,hadoop namenode -format 之后  start-all   可是没有发现DataNode的守护 ...

  10. 2015.05.11,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 44

    1. not the real McCoy simulate(['simjuleit] v. 假装,冒充,模仿,模拟)来自拉丁simulo,copy的意思.simulo本身派生自拉丁形容词simili ...