Vue.js 笔记之 img src
固定路径(原始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的更多相关文章
- vue.js笔记总结
一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且 ...
- 珠峰2016,第9期 vue.js 笔记部份
在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm init ...
- vue.js笔记
一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> &l ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- vue.js笔记1.0
事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click. ...
- vue.js 笔记
<!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{it ...
- node npm vue.js 笔记
cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.n ...
- Vue.js基础 笔记
Vue.js的声明: < script src = “https://unpkg.com/vue” ></ script > el:值可以是CSS选择符.HTML元素.或者是返 ...
- 初试 Vue.js
1.为什么我会想要来弄弄vue这个前端框架呢? 答:前段时间被小程序刷屏了,然后就去弄了一下小程序,嗯挺简单的:头脑一发热后就想到vue2也发布一段时间了,何不也来尝尝vue2.0的味道,最后发现它们 ...
随机推荐
- Python3爬虫环境配置
一.包管理工具Anaconda安装 1.安装直接在官网下载最新版本的 https://www.continuum.io/downloads 2.配置环境变量PATH:C:\Users\Administ ...
- 阻止a标签跳页,使用单击事件函数处理该请求
阻止a标签跳页href="javascript:void(0)" 单击该标签时 页面不跳页 使用单击事件函数来处理该单击请求 返回上一层页面 ---------------- ...
- CF369E. ZS and The Birthday Paradox
/* cf369E. ZS and The Birthday Paradox http://codeforces.com/contest/711/problem/E 抽屉原理+快速幂+逆元+勒让德定理 ...
- GROUP BY 和 ORDER BY 的一起使用
GROUP BY 和 ORDER BY一起使用 写程序也有很长的一段时间了,有些东西我总不曾去思考,很少去积累一些有用的东西,总喜欢"用要即拿"的心态来对待,这是非常不好的坏习惯. ...
- asp.net mvc--传值-前台->后台
前端传值->后端 一.Model Binding 方式 前台 @model ADMgr.Web.Models.ListModel 后台 [HttpPost] public ActionResul ...
- @responsebody注解的作用就是让viewresolver不起作用,不返回视图名称而是直接返回的return object
@responsebody注解的作用就是让viewresolver不起作用,不返回视图名称而是直接返回的return object 2.也可以再方法上添加@ResponseBody注解, 用于这个类里 ...
- rails create方法ActiveModel::ForbiddenAttribute的问题
rails create方法ActiveModel::ForbiddenAttribute的问题 def create @ad = Ad.new(ad_params) @ad.save end pri ...
- codecombat之KithGard地牢19-37关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 19 ...
- hadoop无法启动DataNode问题
因为种种原因,今天又一次安装hadoop集群.清空了/tmp下的文件夹,重新启动集群,hadoop namenode -format 之后 start-all 可是没有发现DataNode的守护 ...
- 2015.05.11,外语,读书笔记-《Word Power Made Easy》 15 “如何谈论事情进展” SESSION 44
1. not the real McCoy simulate(['simjuleit] v. 假装,冒充,模仿,模拟)来自拉丁simulo,copy的意思.simulo本身派生自拉丁形容词simili ...