Vue2.x实现根据获取到的数据 显示不同性别图片

最新推荐文章于 2025-08-16 21:33:43 发布
最新推荐文章于 2025-08-16 21:33:43 发布
阅读量3.6k 收藏 5
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue2.x 文章标签： vue2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37135944/article/details/84324788
本文介绍如何在Vue2.x中利用v-show指令，根据获取到的数据动态显示不同性别的图片。通过在vue文件中编写script代码，并配合演示图进行详细解释。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue2.x实现根据获取到的数据 显示不同性别图片

说明

使用v-show来控制模型的隐藏与显示

vue文件代码

	<img v-show="sex =='0'" src="../assets/img/性别女.png" />
	<img v-show
最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue3 - 路由 Vue-router 4.X（配置与使用教程）
🏆 前端领域优质创作者
11-30 5149
vue3路由官方文档，vue3路由文档，vue-router4官方文档，使用Vite构建Vue3项目,对路由VueRouter，Vue3中VueRouter4路由的配置，vue3-vueRouterv4.x，vue3中vue-router4基本使用(路由基本配置)，Vue3-Router@4.x使用，vue-router4.x教程，Vue3中基于vue-router4的路由配置与使用的简单示例，Vue实战—路由轻松设置vue-router(3)，10分钟快速上手VueR
vue中用echart写饼状图
qq_62449212的博客
07-11 1149
vue中引入echarts图表
vue2.0移动端自定义性别选择提示框
li420520的博客
10-18 822
这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能，很简单但是经常用到，于是写了一个小小的demo，记录下来。 效果图： 图片.png 实现代码： &lt;t emplate&gt; &lt;div class="app"&gt; &lt;div class="boy"&gt; &lt;input type="radio"
Vue radio显示性别
weixin_45068889的博客
05-26 2323
<div class="form-group"> <label>性别：</label> <label class="radio-inline sex"> <input type="radio" name="sex" id="man" value="0" v-model="sex"> 男 </label> <label class="radio-inline"> <
VUE 按返回值进行判断，举例男女
weixin_53363875的博客
09-10 2477
<template> <a-card> <div> <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :load.
后台返回数字（0.1.2.3.......）数据.前台变成对应得汉字 比如 1和0变为 男和女
qq_39510798的博客
08-16 1万+
有两种方法   ： 1.第一个方法为：在 标签里直接写 代码为 2.第二个方法为：在方法里写forEach循环  里面放if判断  
12.Vue2.x收集表单数据input | v-model | select
每天进步一点点！！！
04-22 419
收集表单数据input | v-model | select
vue实现分页功能(BootStrap5.x + vue2.x)
ravi's blog
09-30 1490
0.前置知识 SpringBoot基础 Vue2.x 尚硅谷Vue视频前三十集内容 BootStrap会看文档，懂点英文 1.需求实现 注意第一页的前一页功能为disabled 同理第四页的后一页功能为disabled 中间页 2.后端接口 假如我们拥有这样一个接口： @GetMapping("patients/{pageNum}/{pageSize}") public R getPatientsList(@PathVariable String pageNum, @P
Vue2.x核心技术与实战(一)
最新发布
weixin_52047874的博客
08-16 1065
Vue是什么?Vue是一个用于构建用户界面的渐进式 框架。
vue的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
学习vue笔记（3）
xxxxxii的博客
05-18 623
v-model的使用 作用：vue中使用v-model指令来实现表单元素和数据的双向绑定。 实际效果： 通过v-model实现了双向的绑定，插入到DOM中，所以DOM会发生相应的改变。 原理：v-model是一个语法糖，本质上其实是两个操作： 1.v-bind绑定一个value属性； 2.v-on指令给当前元素绑定input事件。 <input type="text" v-model="message"> 等同于 <input type="text" v-bind:value="mes
根据条件展示不同图片
路飞船长的博客
09-28 740
根据性别展示不同得头像。
vue显示性别0、1为男、女。filter过滤器方法
monody666的博客
02-26 1万+
<el-table-column prop="salarySex" label="性别" align="center"> <template slot-scope="scope"> <!-- 通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 用|分割，前面获取传给后面，然后通过filters获取 --> .
Vue-ElementUI el-table表格中根据后端获取的0、1、2显式对应性别中文（未知、男、女）
qq_40905896的博客
04-09 4934
Data接受后端传来的List数据： el-table将list数据单向绑定 表格中性别字段显式： 显示效果：
vue表格elementui Scope.row根据某个数据展示不同的样式
han_xiao_xiao的博客
06-16 1960
<el-table-column label="性别" prop="status"> <template slot-scope="scope"> <span :style="{ color: scope.row.stutas=== 0 ? 'red' : 'black' }">{{ scope.row.stutas=== 1 ? '男' : '女' }}</span> </template> </el-t
Vue之vue项目引入图片和设置路径别名
weixin_40736319的博客
04-20 3676
1、在vue项目中引入图片，图片放在static/img文件下，引用的时候这样写 <div class="img"> <img src='static/img/face-1.jpg'> </div> //在static文件夹下的静态文件加入时不需要从引用出网上找，如不需要这样写 //'..../static/img/face-1.jpg' //而只需要从...
Vue--iconfont图标
52HZ的鱼
02-17 639
1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色）2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的）3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）兼容性 unicode > font-class > symbol。
【DZX修改】根据性别不同显示不同的默认头像
07-04 1727
默认头像指的是未上传头像的新会员默认显示的头像。 看到有不少人想要按照性别的不同来显示不同的默认头像，现在小修改一下，给大家使用。 修改两个文件 1.打开source\function\function_core.php 查找 if(!$staticavatar && !$static) { 复制代码 把下面的return的那一句换成如下代码：
springboot,vue,echart,mysql数据可视化-男女比例图
qq_46199553的博客
01-16 5688
由于自己的项目需要大数据可视化，所以就得学习，对于数据的处理就是一个难事，我在想如何对男女这个数据进行处理，因为两个数据不可能存储在数据库中，所以就需要hashmap这种形式去存储，而且男女人数是存储在另外一张表的，需要使用sql去统计出来。所以我不是从数据库中直接读取的男女总数，代码如下： 后端代码： controller： package com.controller; import com.alibaba.fastjson.JSON; import com.entity.Problem; imp.
vue2使用x-data-spreadsheet 实现excel文件导入导出 可编辑单元格样式
06-03
接下来，我们使用xlsx库解析文件数据，获取到表格数据后，我们将其转换为x-data-spreadsheet库所需的数据格式，并使用Spreadsheet对象的loadData方法加载数据。 希望这个示例能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值