首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现单选和多选功能

Posted in Javascript onAugust 11, 2017

本文实例为大家分享了vue实现单选和多选功能的具体代码，供大家参考，具体内容如下复制代码

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta>
 <title>Document</title>
 <script src="../vue.js"></script>
 <style>
  ul, li {
   list-style-type: none;
  }

  * {
   margin: 0;
   padding: 0;
  }

  .border-1px {
   position: relative;
  }

  .border-1px:after {
   display: block;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   border-top: 1px solid rgba(7, 17, 27, .1);
   content: ' ';
  }

  @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
   .border-1px::after {
    -webkit-transform: scaleY(0.7);
    transform: scaleY(0.7);
   }
  }

  @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
   .border-1px ::after {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
   }
  }

  #example {
   margin: 20px;
  }

  h3 {
   font-size: 26px;
   margin-left: 20px;
   height: 60px;
  }

  .self-radio {
   display: none;
  }

  .self-radio + label {
   -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #aaa;
   border-radius: 50px;
   display: inline-block;
   position: relative;
   width: 30px;
   height: 30px;
   box-sizing: border-box;
  }

  .self-radio:checked + label {
   border: 1px #47d9bf solid;
  }

  .self-radio:checked + label:after {
   position: absolute;
   top: 9px;
   left: 9px;
   content: ' ';
   width: 10px;
   height: 10px;
   border-radius: 50px;
   background: #47d9bf;
   box-shadow: 0px 0px 5px 0px #47d9bf;
  }

  .check-area {
   display: inline-block;
   width: 400px;
   padding: 12px 20px;
   border: 1px solid #aaa;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
  }

  li {
   height: 60px;
  }

  li .self-radio + label {
   vertical-align: middle;
  }

  li span {
   margin-left: 20px;
   display: inline-block;
   line-height: 60px;
   font-size: 22px;
  }

  p {
   height: 60px;
   line-height: 60px;
   margin-left: 20px;
  }

  p span {
   color: #f00;
  }

  .btn {
   margin: 20px auto;
   width: 100%;
   text-align: center;
  }

  .btn button {
   width: 120px;
   height: 40px;
   line-height: 30px;
   font-size: 16px;
   color: #fff;
   background: #47d9bf;
   border: 1px #23d5b6 solid;
   border-radius: 6px;
   text-align: center;
   outline: none;
  }

  .btn button:hover {
   background: #23d5b6;
  }
 </style>
</head>

<body>
<div id="example">
 <h3>单选按钮</h3>
 <div class="check-area" v-show="items.length!=0">
  <ul>
   <li class="border-1px" v-for="(item,index) in items">
    <input class="self-radio" type="radio"
      :id="'radio-'+item.id"
      :data-id="'food-'+item.id" name="radio"
      :checked="index==0"
      :value="item.value"
      v-model="checkValue">
    <label :for="'radio-'+item.id" @click="setCheckValue(item)"></label>
    <span>{{item.value}}</span>
   </li>
  </ul>
  <p>您选择了：<span>{{checkValue}}</span></p>
  <div class="btn">
   <button @click="showCheck(checkId)">按钮</button>
   <span>{{checkId}}</span>
  </div>
 </div>
</div>
<script>
 var itemData = [{id: '20170811001', value: '香蕉'},
  {id: '20170811002', value: '苹果'},
  {
   id: '20170811003',
   value: '梨子'
  }, {id: '20170811004', value: '葡萄'}]
 //itemData = [];
 var vm = new Vue({
  el: '#example',
  data: {
   items: '',
   checkValue: '',
   checkId: ''
  },
  methods: {
   init: function () {

   },
   initData: function () {
    var self = this;
    self.items = itemData;
    if (itemData.length != 0) {
     self.checkValue = self.items[0].value;
     self.checkId = 'food-' + self.items[0].id
    }
   },
   setCheckValue: function (item) {
    this.checkId = 'food-' + item.id;
   }
   ,
   showCheck: function () {
    console.log(this.checkId)
   }
  },
  mounted: function () {
   this.initData();
  }
 })

</script>
</body>

</html>

vue实现单选和多选功能

vue实现多选功能

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta>
 <title>Document</title>
 <script src="../vue.js"></script>
 <style>
 ul, li {
  list-style-type: none;
 }

 * {
  margin: 0;
  padding: 0;
 }

 .border-1px {
  position: relative;
 }

 .border-1px:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(7, 17, 27, .1);
  content: ' ';
 }

 @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px::after {
  -webkit-transform: scaleY(0.7);
  transform: scaleY(0.7);
  }
 }

 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px ::after {
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  }
 }

 #example {
  margin: 20px;
 }

 h3 {
  font-size: 26px;
  margin-left: 20px;
  height: 60px;
 }

 .self-checkbox {
  display: none;
 }

 .self-checkbox + label {
  margin-top: 16px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #aaa;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  vertical-align: top;
 }

 .self-checkbox:checked + label {
  border: 2px #47d9bf solid;
 }

 .self-checkbox:checked + label:after {
  display: inline-block;
  text-align: center;
  content: '√';
  width: 100%;
  height: 30px;
  line-height: 26px;
  color: #47d9bf;
  font-size: 18px;
  text-shadow: 0px 0px 5px #47d9bf;
 }

 .check-area {
  display: inline-block;
  width: 400px;
  padding: 12px 20px;
  border: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
 }

 li {
  height: 60px;
 }

 li .self-radio + label {
  vertical-align: middle;
 }

 li span {
  margin-left: 20px;
  display: inline-block;
  line-height: 60px;
  font-size: 22px;
 }

 p {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
 }

 p span {
  color: #f00;
 }

 .btn {
  margin: 20px auto;
  width: 100%;
  text-align: center;
 }

 .btn button {
  width: 120px;
  height: 40px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  background: #47d9bf;
  border: 1px #23d5b6 solid;
  border-radius: 6px;
  text-align: center;
  outline: none;
 }

 .btn button:hover {
  background: #23d5b6;
 }
 </style>
</head>

<body>
<div id="example">
 <h3>多选按钮</h3>
 <div class="check-area" v-show="items.length!=0">
 <ul>
  <li class="border-1px" v-for="(item,index) in items">
  <input class="self-checkbox" type="checkbox"
   :id="'checkbox-'+item.id"
   :data-id="'food-'+item.id" name="radio"
   :value="item.value"
   v-model="checkValues"
   @click="setCheckValue($event,item)">
  <label :for="'checkbox-'+item.id"></label>
  <span>{{item.value}}</span>
  </li>
 </ul>
 <p>您选择了：<span v-show="checkValues.length">{{filterCheckValues}}</span></p>
 <div class="btn">
  <button @click="showCheck(checkIds)">按钮</button>
  <span v-show="checkIds.length">{{checkIds}}</span>
 </div>
 </div>
</div>
<script>
 var itemData = [{id: '20170811001', value: '香蕉'},
 {id: '20170811002', value: '苹果'},
 {
  id: '20170811003',
  value: '梨子'
 }, {id: '20170811004', value: '葡萄'}]
 //itemData = [];
 var vm = new Vue({
 el: '#example',
 data: {
  items: '',
  checkValues: [],
  checkIds: []
 },
 computed: {
  filterCheckValues: function () {
  var value = this.checkValues;
  var reValue = '';
  for (var i = 0; i < value.length; i++) {
   reValue += value[i] + '、'
  }
  reValue = reValue.substring(0, reValue.length - 1)
  return reValue;
  }
 },
 methods: {
  initData: function () {
  var self = this;
  self.items = itemData;
  if (itemData.length != 0) {
//   self.checkValues[0] = self.items[0].value;
//   self.checkIds[0] = 'food-' + self.items[0].id;
  }
  },
  setCheckValue: function (ev, item) {
  var id = 'food-' + item.id;
  if (ev.target.checked) {
   this.checkIds.push(id);
  } else if (this.checkIds.indexOf(id) > -1) {
   this.checkIds.remove(id);
  }
  }
  ,
  showCheck: function () {
  console.log(this.checkIds)
  }
 },
 filter: {},
 mounted: function () {
  this.initData();
 }
 })
 Array.prototype.remove = function (val) {
 var index = this.indexOf(val);
 if (index > -1) {
  this.splice(index, 1);
 }
 };
</script>
</body>

</html>

vue实现单选和多选功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue实现单选和多选功能

- Author -

Newbie_小白

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 #Javascript
Angular模板表单校验方法详解
Aug 11 #Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 #Javascript
Vue 表单控件绑定的实现示例
Aug 11 #Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 #Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 #Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 #Javascript
props(1) postcss-px2rem(1) 索引树扫描(1) ref(1) 匹配(1) lua(3) geoserver(1) mixin(1) 相对定位(1) 绝对定位(1)
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
JS 设计模式之：单例模式定义与实现方法浅析
2020/05/06 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
心理健康课教学反思
2014/02/13 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
医德考评自我评价
2014/09/14 职场文书
2016春季运动会前导词
2015/11/25 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL