国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置： 首頁 - 科技 - 知識百科 - 正文

vue實現(xiàn)單選和多選功能

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 22:32:51
文檔

vue實現(xiàn)單選和多選功能

本文實例為大家分享了vue實現(xiàn)單選和多選功能的具體代碼，供大家參考，具體內(nèi)容如下：<。= 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>；
推薦度：
導(dǎo)讀本文實例為大家分享了vue實現(xiàn)單選和多選功能的具體代碼，供大家參考，具體內(nèi)容如下：<。= 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實現(xiàn)單選和多選功能的具體代碼，供大家參考，具體內(nèi)容如下

<!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實現(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;
 }

 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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vue實現(xiàn)單選和多選功能

本文實例為大家分享了vue實現(xiàn)單選和多選功能的具體代碼，供大家參考，具體內(nèi)容如下：<。= 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 多選
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板： 久久久久久久亚洲精品 | 亚洲精品社区 | 一区二区三区福利 | 亚洲日韩区在线电影 | 精品久久久久久综合日本 | 日韩一区二区三区视频 | 亚洲国产一区二区三区 | 一级毛片特级毛片免费的 | 国产在线成人一区二区 | 免费中文字幕一级毛片 | 国产一区二区三区在线看 | 国产成人精品久久一区二区三区 | 成人99国产精品一级毛片 | 欧美综合自拍亚洲综合百度 | 久久精品一区 | 国内高清久久久久久久久 | 国产第一页精品 | 中文字幕久久亚洲一区 | 久久se精品一区二区国产 | 亚洲全黄| 国产一区二区不卡 | 国产免费小视频在线观看 | 日韩高清在线观看 | 精品国产一区二区三区免费看 | 日韩精品电影在线观看 | 久久se精品一区二区国产 | 中文字幕日韩一区二区三区不卡 | 国产成人三级经典中文 | 国产精品1区2区3区在线播放 | 91精品欧美 | 久久精品成人一区二区三区 | 欧美日韩国产一区二区 | 欧美 日韩 亚洲另类专区 | 国产日韩一区二区三区 | 国产视频播放 | 欧美日韩高清 | 亚洲国产欧美视频 | 久久精品国产一区 | 成人免费久久精品国产片久久影院 | 99精品欧美一区二区三区综合在线 | 亚洲欧美日韩精品专区卡通 |