Vue.js 动态为img的src赋值方法
需求是这样:
ajax获取数据如下
{ "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "time": "2015-08-11" }, { "amount": 100, "sex": "female", "fee": 0, "id": 8, "status": 2, "time": "2015-06-12" }] }, "msg": "success" }
然后渲染列表到页面,如果男,则将img的src设为"images/male.png",反之设为"images/female.png"
两个都可以实现,为了在html中看起来舒服点还是用filter吧,虽然也就一个判断逻辑,但是判断语句加上url,这就不美观了,当然,这只是个人习惯,直接用指令的话直观点
<img v-attr="src: sex=='male'?'images/male.png':'images/female.png'"> <img v-attr="src: sex | isM">
对应的filter
filters: { isM: function (val) { return val == 'male' ? 'images/male.png' : 'images/female.pn' } }
方法很多,我写我推荐的吧:
首先男女这样的标示属于装饰性内容,我建议写到css里面。也就是说用背景图的形式来控制现实男女
这样你有两个class .male female
<span class={{sex}}></span>
以上这篇Vue.js 动态为img的src赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
您可能感兴趣的文章:
- 基于vue 动态加载图片src的解决方法
- vue cli使用绝对路径引用图片问题的解决
- 解决vue打包之后静态资源图片失效的问题
- 解决vue2.0动态绑定图片src属性值初始化时报错的问题
相关推荐
-
解决vue打包之后静态资源图片失效的问题
1.问题描述 在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到(404错误),这些图片可以是以src引入的图片, 也可以是css中定义的背景图片.图片能否显示与你的静态资源文件存在位置和引入的路径直接相关,下面是我的其中一个项目的文件存放以及路径书写方式! 2.解决方法之一 静态资源static存放位置放在src目录下 你可能会问为什么放在src目录下?放在跟src同级目录下不可以吗?好吧,一开始我也是放在src同
-
基于vue 动态加载图片src的解决方法
好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p
-
解决vue2.0动态绑定图片src属性值初始化时报错的问题
在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo
-
vue cli使用绝对路径引用图片问题的解决
前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr
-
Vue.js 动态为img的src赋值方法
需求是这样: ajax获取数据如下 { "code": "200", "data": { "SumAmount": 200, "List": [{ "amount": 100, "sex": "male", "fee": 1, "id": 98, "status": 2, "ti
-
vue.js动态组件和插槽的使用汇总
目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格
-
Vue.js动态添加、删除选题的实例代码
大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp
-
vue.js 动态组件详解
:is 动态组件 使用 v-bind:is="组件名",会自动去找匹配的组件名,如果没有,则不显示: <div id="app"> <test v-bind:is="which_to_show"></test> </div> <script> var demo = new Vue({ el: "#app", data: { which_to_show: "f
-
vue.js动态设置VueComponent高度遇到的问题及解决
目录 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 2.获取VueComponent标签生成的元素的高度 3.判断一个对象是jQuery对象还是DOM对象 vue动态获取.设置组件高度 vue.js动态设置VueComponent高度的问题 1.获取HTML元素高度 <div v-for="data in list"> <div ref="abc">{{data.id}}</div> &
-
利用vue.js实现被选中状态的改变方法
在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &
-
Vue实现动态创建和删除数据的方法
视图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //导入vue.js <script type="text/javascript" src="./vue.js"></script> //非常简单了设置了一下css样式 <style typ
-
浅析JS动态创建元素【两种方法】
前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe
-
vue.js获得当前元素的文字信息方法
1.获得当前点击的内容 <li @click="problem1"> 1. <span class="blue">关于公众号使用问题</span> <img src="../img/right.png" alt=""/> </li> 当我点击这个li标签的时候,我想要获得span里面的文字,可以使用这个方法: problem1: function(e){ consol
-
vue.js实现插入数值与表达式的方法分析
本文实例讲述了vue.js实现插入数值与表达式的方法.分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1.插入纯文本 插入纯文本是最简单的方式,使用双大括号就能插入想要的值. <span>{{ msg }}</span> mustache也可以在属性中使用 <div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了.但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入
随机推荐
- spring boot中的properties参数配置详解
- oracle用户权限管理使用详解
- 使用jQuery插件创建常规模态窗口登陆效果
- js数组与字符串常用方法总结
- Bootstrap3制作搜索框样式的方法
- Java编程实现非对称加密的方法详解
- JS树形菜单组件Bootstrap TreeView使用方法详解
- 如何判断php mysqli扩展类是否开启
- 浅谈PHP Extension的开发——基础篇第1/2页
- 高级php注入方法集锦第1/2页
- 图文详解Android Studio搭建Android集成开发环境的过程
- Android中极简的js与java的交互库(SimpleJavaJsBridge)
- 使用postMesssage()实现跨域iframe页面间的信息传递方法
- javascript编写简易计算器
- AJAX开发技术在PHP开发中的简单应用技巧
- java多线程编程之慎重使用volatile关键字
- jQuery垂直多级导航菜单代码分享
- asp HTTP 500错误 常见问题分析
- js插件Jcrop自定义截取图片功能
- 批处理提取不同行上的内容的代码