vue评价星星加笑脸（娃娃头像）

直接上代码vue：

<view class="flex align-center justify-between margin-t-30"><view v-for="item in chooseList" :key="item.key" @click="imageHandler(item.key)" class="width-130"><view class="relative"><view><view class="icon-image absolute" :class="item.selected?'visible':'hidden'"><u-image :src="item.selectedImg" :showLoading="false"></u-image></view><view class="icon-image absolute" :class="item.selected?'hidden':'visible'"><u-image :src="item.img" :showLoading="false"></u-image></view></view><view class="absolute text-absolute">{{ item.text }}</view></view></view>
</view>

export default {data(){return {chooseList: [{key: "acclaim",text: "好评",img: this.$static + "/common/images/acclaimUnchecked.png",selectedImg: this.$static + "/common/images/acclaim.png",selected: true},{key: "badReviews",text: "中评",img: this.$static + "/common/images/badReviewsUnchecked.png",selectedImg: this.$static + "/common/images/badReviews.png",selected: false},{key: "mediumRating",text: "差评",img: this.$static + "/common/images/mediumRatingUnchecked.png",selectedImg: this.$static + "/common/images/mediumRating.png",selected: false}],//商品评价图标chooseOne: ""//商品评价图标选中项}}，methods: {imageHandler(key){this.chooseList.forEach(item =>{if (item.key === key){item.selected = true;this.chooseOne = key;}else{item.selected = false;}});}}}

<style  scoped>.flex{display: flex;}.align-center{align-items: center;}.justify-between{justify-content: space-between;}.margin-t-30{margin-top: 30rpx;}.width-130{width: 130rpx;}.relative{position: relative;}.absolute{position: absolute;}.icon-image{width: 60rpx;height: 60rpx;}.hidden{visibility: hidden;}.visible{visibility: visible;}.text-absolute{right: 0;top: 20rpx;}
</style>

vue评价星星加笑脸（娃娃头像）相关推荐

基于 springboot + vue 的 element-ui 的 upload 组件头像上传功能
基于 springboot + vue 的 element-ui 的 upload 组件头像上传为了方便我们自己本地测试使用,我们将文件上传至自己电脑的磁盘中,由于项目是前后端分离的,所以我们会直接 ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
Vue+Leaflet实现加载Stamen显示地图
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面加载显示OSM的基础上,怎样显示s ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
Vue首屏加载白屏问题及解决方案
Vue首屏加载白屏问题及解决方案首先说一下首页加载为什么会白屏? 先说下 SPA 单页面的加载过程首先就是 html ,也就是 FP 阶段 FP(全称"First Paint" ...
vue与外部html通信,VUE页面实现加载外部HTML方法
VUE页面实现加载外部HTML方法 VUE页面实现加载外部HTML方法前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形 ...
【Vue-router中，require代替import解决vue项目首页加载时间过久】
vue-router中,require代替import解决vue项目首页加载时间过久的问题 - 雨打芭蕉wt - 博客园
Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

vue评价星星加笑脸（娃娃头像）

vue评价星星加笑脸（娃娃头像）相关推荐

最新文章

热门文章