编程 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 相关文章推荐

javascript cookies 设置、读取、删除实例代码

Apr 12 Javascript

TBCompressor js代码压缩

Jan 05 Javascript

Js nodeType 属性全面解析

Nov 14 Javascript

javascript实现自动填写表单实例简析

Dec 02 Javascript

Node.js插件安装图文教程

May 06 Javascript

老生常谈的跨域处理

Jan 11 Javascript

jQuery中ajax获取数据赋值给页面的实例

Dec 31 jQuery

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

Aug 02 Javascript

jQuery基于随机数解决中午吃什么去哪吃问题示例

Dec 29 jQuery

详解超简单的react服务器渲染(ssr)入坑指南

Feb 28 Javascript

JavaScript中变量提升和函数提升的详解

Aug 07 Javascript

利用JavaScript模拟京东按键输入功能

Dec 01 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