<template>
<div>
<ul v-for="prop in items">
<dt>{{prop.name}}</dt>
<dd v-for="op in prop.options">
<input type="checkbox" :value="op" v-model="selectedProperties">{{op.value}}
</dd>
</ul>
{{selectedProperties}}<br />
{{foos}}
</div>
</template> <script>
export default {
computed:{
foos(){
return this.selectedProperties.map(item => item.value);
}
},
data() {
return {
selectedProperties: [],
items: [
{
"name": "容量", "type": 1, "options": [
{ "id": "1", "value": "64G" },
{ "id": "2", "value": "256G" }
]
},
{
"name": "颜色", "type": 1, "options": [
{ "id": "3", "value": "金色" },
{ "id": "4", "value": "红色" }
]
},
{
"name": "网络类型", "type": 1, "options": [
{ "id": "5", "value": "4G全网通" },
{ "id": "6", "value": "4G电信" },
{ "id": "7", "value": "4G移动" }
]
},
{
"name": "套餐类型", "type": 1, "options": [
{ "id": "8", "value": "普通套餐" },
{ "id": "9", "value": "高级套餐" }
]
}
]
}
}
} </script>

vue实现选中列表功能的更多相关文章

  1. django rest_framework vue 实现用户列表分页

    django rest_framework vue 实现用户列表分页 后端 配置urls # 导入view from api.appview.userListView import userListV ...

  2. WijmoJS V2019.0 Update2发布:再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  3. nginx 目录文件列表功能配置

    工作中常常有写不能有网页下载东西的需求,在Apache下搭建完成后直接导入文件即可达到下载/显示文件的效果,而Nginx也可以满足这样的需求(nginx 目录列表功能默认是关闭的),这时就需要配置. ...

  4. HoverTree项目添加了查看留言列表功能

    HoverTree项目添加了查看留言列表功能 页面:HoverTreeWeb项目下hvtpanel/usermessage/messagelist.aspx 添加留言页面:addmessage.asx ...

  5. 【转】如何开启notepad++函数列表功能

    原文网址:http://jingyan.baidu.com/article/4b07be3c41e05e48b380f3f6.html Notepad++是window下特有的一款开源编辑器软件,相信 ...

  6. 开放Nginx在文件夹列表功能

    nginx在列出的默认同意整个文件夹.你怎么转Nginx在文件夹列表功能?打开nginx.conf文件.在location server 要么 http段增加 autoindex on;另外两个參数最 ...

  7. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  8. 用Vue实现状态列表的操作涵盖所有的知识点

    用Vue实现状态列表的操作涵盖所有的知识点

  9. 微信小程序新闻列表功能(读取文件、template模板使用)

    微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件 ...

随机推荐

  1. 【总结整理】JQuery基础学习---样式篇

    进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...

  2. 使用showOptionDialog显示多项选择框

    -----------------siwuxie095                             工程名:TestJOptionPane 包名:com.siwuxie095.showdi ...

  3. 做c语言的码农专业发展方向

    写了几年C语言代码,最近在思索,何去何从比较好? 搜索了一下,发现几个答案: 2015年10月编程语言排行榜 丢开C语言在教学应用外.在目前C语言的实际应用中.常见的应用的情景有如下: 内核/驱动,b ...

  4. NYOJ 喷水装置(二)

    题目转换成,每个水龙头在横坐标方向上覆盖的长度区间,转换后的问题就有点像会场安排问题了,然后接下来选的方案依据贪心,我们队这些个区间进行排序,依照区间的左端点按从小到大排序,然后从左往右选取,条件是当 ...

  5. 聪明的kk (南洋理工—171)

    #include<iostream> using namespace std; ][]; ][]; int N, M; int dp(int i, int j) { ) return d[ ...

  6. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

  7. 2018杭电多校第五场1002(暴力DFS【数位】,剪枝)

    //never use translation#include<bits/stdc++.h>using namespace std;int k;char a[20];//储存每个数的数值i ...

  8. JavaWeb:Cookie处理和Session跟踪

    JavaWeb:Cookie处理和Session跟踪 Cookie处理 什么是Cookie Cookie 是存储在客户端计算机上的文本文件,保留了各种跟踪信息.因为HTTP协议是无状态的,即服务器不知 ...

  9. DHCP DHCPv6

    为了给网络客户机自动分配IP地址以及生成所需的配置参数,IETF分别给IPV4和IPV6网络定义了相关的协议标准,即DHCP(RFC2131)和DHCPV6(RFC3315),以及扩充的选项标准.本文 ...

  10. Restful 2 --DRF解析器,序列化组件使用(GET/POST接口设计)

    一.DRF - 解析器 1.解析器的引出 我们知道,浏览器可以向django服务器发送json格式的数据,此时,django不会帮我们进行解析,只是将发送的原数据保存在request.body中,只有 ...