vue如何實(shí)現(xiàn)單選和多選功能-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)單選和多選功能，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：申請域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、雷州網(wǎng)站維護(hù)、網(wǎng)站推廣。

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

vue實(shí)現(xiàn)單選和多選功能的具體代碼，具體內(nèi)容如下復(fù)制代碼

<!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;
  }

  h4 {
   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">
 <h4>單選按鈕</h4>
 <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如何實(shí)現(xiàn)單選和多選功能

vue實(shí)現(xiàn)多選功能

<!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;
 }

 h4 {
  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">
 <h4>多選按鈕</h4>
 <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如何實(shí)現(xiàn)單選和多選功能

關(guān)于“vue如何實(shí)現(xiàn)單選和多選功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁標(biāo)題：vue如何實(shí)現(xiàn)單選和多選功能-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article32/ddeipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站策劃、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、服務(wù)器托管、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

vue如何實(shí)現(xiàn)單選和多選功能-創(chuàng)新互聯(lián)

Vue的優(yōu)點(diǎn)