vue-发布评论（星星打分，快捷输入）

重点：

星星打分 tapmode @click=“count=i+1” :class=“count>i?‘c-f83600 iconshoucang1’:‘iconshoucang’”；
快捷输入的js,选取某项或取消选取的功能；

1.星星打分

<div class="starli align-center"><div class="starname">整体评价</div><div class="stars align-center c-ccc f-w-b"><!-- 5分- 打分了就变色 换图标 --><!--fistclick='2' --><i class="iconfont" v-for="(v,i) in 5"  tapmode @click="count=i+1" :class="count>i?'c-f83600 iconshoucang1':'iconshoucang'"></i></div>
</div>

2.服务态度好…等快捷输入（可取消）

<!--好评快捷输入-->
<div class="fastshuru flex-row-wrap f-3-2"><!-- v-if="(count>2&&fistclick=='2') || fistclick=='1'" --><div class="fastli" :class="{'active':commarr1.indexOf(v.value)>=0}" v-for="(v,i) in models1" tapmode @click="tapindex1(i,v.value,v.text)">{{v.text}}</div>
</div>
<!--差评快捷输入-->
<div class="fastshuru flex-row-wrap f-3-2" v-if="count<3&&fistclick=='2'"><div class="fastli" :class="{'active':commarr2.indexOf(v.value)>=0}" v-for="(v,i) in models2" tapmode @click="tapindex2(i,v.value,v.text)">{{v.text}}</div>
</div>

<script type="text/javascript">var vm = new Vue({el:'#app',data:{//fistclick:'1',//刚打开展示服务好的快捷输入,选择了星星以后根据3星及以上好评,3星以下差评count:'',//整体评价models1:[{'text':'服务态度好',value:'0'},{'text':'做的快',value:'1'},{'text':'物品保存完好',value:'2'},{'text':'准时准点',value:'3'},{'text':'穿着专业',value:'4'},{'text':'衣着整洁',value:'5'},{'text':'热情负责',value:'6'}],models2:[{'text':'服务态度差',value:'0'},{'text':'做的慢',value:'1'},{'text':'物品损坏',value:'2'},{'text':'不准时',value:'3'},{'text':'不送上楼',value:'4'},{'text':'比较马虎',value:'5'},{'text':'未穿制服',value:'6'},{'text':'形象邋遢',value:'7'}],commarr1:[],commarr2:[],arr1:[],arr2:[],goodsdd1:'',goodsdd2:'',goodscomm:'',images:[],info:{'courier_info':{'nick_name':'','avatar_url':'',},},},methods:{tapindex1(index,value,text){//数组-1代表未匹配到元素（没有选择就去选择的操作）if(vm.commarr1.indexOf(value)==-1){vm.commarr1.push(value);//push() 方法向数组末尾添加新项目，并返回新长度。vm.arr1.push(text);vm.goodsdd1 = vm.arr1.join(',');//join() 方法将数组作为字符串返回,元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。不会改变原始数组。}else{//否则就是已有元素，去重操作var index1 = vm.commarr1.indexOf(value);//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目（）//arrayObject.splice(index,howmany,item1,.....,itemX)//index---必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。//howmany---必需。要删除的项目数量。如果设置为 0，则不会删除项目。//item1, ..., itemX---可选。向数组添加的新项目。vm.commarr1.splice(index1,1);//删除指定位置的一项var index1 = vm.arr1.indexOf(text)vm.arr1.splice(index1,1);vm.goodsdd1 = vm.arr1.join(',');}//vm.commarr1=------ ["1","4"]//vm.arr1=------ ["做的快","穿着专业"]//vm.goodsdd1=------ "做的快,穿着专业"},tapindex2(index,value,text){if(vm.commarr2.indexOf(value)==-1){vm.commarr2.push(value);vm.arr2.push(text);vm.goodsdd2 = vm.arr2.join(',');}else{var index1 = vm.commarr2.indexOf(value);vm.commarr2.splice(index1,1);var index2 = vm.arr2.indexOf(text)vm.arr2.splice(index2,1);vm.goodsdd2 = vm.arr2.join(',');}},},})</script>

vue-发布评论（星星打分，快捷输入）相关推荐

微信小程序开发（4）--发布评论
这里我要做的小程序是一个学生信息中心的小程序.所以其中之后难免会有发布评论这一个小部分. 1.输入内容部分设计首先是输入框和按钮设计新建一个page页面,在其中的 .wxml 文件中使用 view ...
创建简易的微博发布评论效果
DOM DOM - 文档对象模型一套操作页面元素的API DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作 DOM的概念文档对象模型(Document Object ...
linux 约等于符号,Mac OS X基础教程：特殊符号的快捷输入方式
对于刚刚接触Mac的用户来说,一些快捷输入的方式可能会是他们想要了解的,特别是在文档中输入一些特别的符号,今天我们就为大家介绍一些符号的快捷输入方式.本文为基础教程,资深用户可略过. 苹果符号按下S ...
phpcms文章的发布时间改为可输入的文本框
phpcms文章的inputtime发布时间readonly改为可输入的文本框 phpcms文章的发布时间改为可输入的文本框? 发布文章的时候,有时候不喜欢选择时间:相反,喜欢直接输入年月日 name ...
135_Power Query M语言快捷输入之输入法设置自定义短语
博客:www.jiaopengzi.com 焦棚子的文章目录请点击下载附件一.背景因为工作原因,把电脑重装了下,当敲M的时候总感觉那里不对.原来是我的M自定义短语没有同步.由于我的自定义短语还是 ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
css滑动星星评分,纯css3滑动星星打分动画特效
特效描述:纯css3 滑动星星打分动画.纯css3滑动星星打分动画特效代码结构 1. 引入CSS 2. HTML代码基本样式: Basic star rating: 5 stars 4 stars ...
vue实现input输入框控制最多输入一位小数
vue实现input输入框控制最多输入一位小数, 直接在校验规则中写上js正则表达式就行,表达式如下: /^(\d+\.\d{1,1}|\d+)$/
html的星星评分效果,利用jQuery实现星星打分评分插件
特效描述:利用jQuery实现星星打分评分插件.利用jQuery实现星星打分评分插件代码结构 1. 引入JS 2. HTML代码 $("#star_grade").marki ...

vue-发布评论（星星打分，快捷输入）

1.星星打分

2.服务态度好…等快捷输入（可取消）

vue-发布评论（星星打分，快捷输入）相关推荐

最新文章

热门文章