Vue实现用户自定义字段显示数据的方法
如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../lib/vue.min.js"></script>
<style>
.middle::-webkit-scrollbar {height:8px;}
/* 滚动槽 */
.middle::-webkit-scrollbar-track {border-radius: 10px;}
/* 滚动条滑块 */
.middle::-webkit-scrollbar-thumb {background: #ccc;}
* {margin: 0;padding: 0;box-sizing:border-box;font-family: "微软雅黑";}
#tabPanel{width:1100px;height:300px;margin:100px auto;}
.left{float:left;height:300px;width:300px;font-size:0;}
.left .item,.right .item,.middle .item{display:inline-block;width:100px;}
.left .item span,.middle .item span,.left .item span{display:block;height:50px;text-align:center;line-height:50px;font-size:14px;border:1px solid #eee;}
.right .item{width:200px;height:50px;line-height:50px;text-align:center;border:1px solid #eee;}
.right .item span{display:inline-block;border:none;color:blue;text-decoration: underline;cursor:pointer;}
.middle{float:left;height:300px;width:300px;font-size:0;overflow-x:scroll;overflow-y:hidden;}
.right{float:left;height:300px;width:200px;}
#tabPanel .chooseItem {padding:10px 0;}
#tabPanel .chooseItem label{padding:0 10px;}
</style>
<title>Vue实现自定义字段数据</title>
</head>
<body>
<div id="tabPanel">
<div class="chooseItem">
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.weight">体重</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.inter">兴趣</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.schoold">学校</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.district">所属地区</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.class">所属年级</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.math">数学</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.chinese">语文</label>
<label @click="chooseFile()"><input type="checkbox" @click.stop="" v-model="field.english">英语</label>
</div>
<div class="left">
<div class="item">
<span>编号</span>
<span v-for="(item, index) in students">{{item.id}}</span>
</div>
<div class="item">
<span>姓别</span>
<span v-for="(item, index) in students">{{item.sex}}</span>
</div>
<div class="item">
<span>身高</span>
<span v-for="(item, index) in students">{{item.hight}}</span>
</div>
</div>
<div class="middle">
<div :style="{width: (length*100) + 'px'}">
<div class="item" v-show="field.weight">
<span>体重</span>
<span v-for="(item, index) in students">{{item.weight}}</span>
</div>
<div class="item" v-show="field.inter">
<span>兴趣</span>
<span v-for="(item, index) in students">{{item.inter}}</span>
</div>
<div class="item" v-show="field.schoold">
<span>学校</span>
<span v-for="(item, index) in students">{{item.schoold}}</span>
</div>
<div class="item" v-show="field.district">
<span>所属地区</span>
<span v-for="(item, index) in students">{{item.district}}</span>
</div>
<div class="item" v-show="field.class">
<span>所属年级</span>
<span v-for="(item, index) in students">{{item.class}}</span>
</div>
<div class="item" v-show="field.math">
<span>数学</span>
<span v-for="(item, index) in students">{{item.math}}</span>
</div>
<div class="item" v-show="field.chinese">
<span>语文</span>
<span v-for="(item, index) in students">{{item.chinese}}</span>
</div>
<div class="item" v-show="field.english">
<span>英语</span>
<span v-for="(item, index) in students">{{item.english}}</span>
</div>
</div>
</div>
<div class="right">
<div class="item">
<span>操作</span>
</div>
<div class="item" v-for="(item, index) in students">
<span @click="detail(item.id ,index)" :title="item.id">查看</span>
<span @click="detail(item.id ,index)" :title="item.id">删除</span>
<span @click="detail(item.id ,index)" :title="item.id">修改</span>
<span @click="detail(item.id ,index)" :title="item.id">冻结</span>
</div>
</div>
</div>
</body>
<script>
var v = new Vue({
el: "#tabPanel",
data: {
length: 3,
field:{
weight: true,
inter: true,
schoold: true,
district: false,
class: false,
math: false,
chinese: false,
english: false
},
students:[{
id: 1,
name: 'zhangsan01',
sex: '男',
hight: '168cm',
weight: '56kg',
inter: '篮球1',
schoold: '清华大学1',
district: '湖南省1',
class: '大学三年级1',
math: '97',
chinese: '98',
english: '120'
},{
id: 2,
name: 'zhangsan02',
sex: '男',
hight: '168cm',
weight: '56kg',
inter: '篮球2',
schoold: '清华大学2',
district: '湖南省2',
class: '大学三年级2',
math: '97',
chinese: '98',
english: '120'
},{
id: 3,
name: 'zhangsan03',
sex: '男',
hight: '168cm',
weight: '56kg',
inter: '篮球3',
schoold: '清华大学3',
district: '湖南省3',
class: '大学三年级3',
math: '97',
chinese: '98',
english: '120'
},{
id: 4,
name: 'zhangsan04',
sex: '男',
hight: '168cm',
weight: '56kg',
inter: '篮球4',
schoold: '清华大学4',
district: '湖南省4',
class: '大学三年级4',
math: '97',
chinese: '98',
english: '120'
},{
id: 5,
name: 'zhangsan05',
sex: '男',
hight: '168cm',
weight: '56kg',
inter: '篮球5',
schoold: '清华大学5',
district: '湖南省5',
class: '大学三年级5',
math: '97',
chinese: '98',
english: '120'
}]
},
methods: {
//双击删除滑块
del: function(index) {
this.tabs.splice(index, 1);
this.tabContents.splice(index, 1)
},
//编辑选项内容
editContent: function(index, value) {
this.tabContents[index] = value;
console.log(this.tabContents);
},
chooseFile: function(){
var val = this.field;
//this.length = 0;
for (i in val){
if(val[i]){
this.length = this.length + 1;
}
//console.log(val.lenght)
}
if(this.length > 8){
this.length = 8;
}
console.log(this.length);
}
},
computed: {
lengthb: function(){
if(length > 6){
lengthb = 6
}
}
},
watch: {
field: function(val){
//console.log(this.field.lenght);
}
}
});
</script>
</html>
以上这篇Vue实现用户自定义字段显示数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue使用ajax获取后台数据进行显示的示例
实例如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/vue.min.js"></script> <script src="/vue-resource.min.js"&g
-
vue组件开发之用户无限添加自定义填写表单的方法
效果图: 代码如下: <template> <div class="checkbox"> <div class="input"> <p v-for="item in inputs"> <span>自定义字段:</span> <input type="text" v-model="item.val"> </p> &
-
vue 修改 data 数据问题并实时显示的方法
首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初
-
vue.js通过自定义指令实现数据拉取更新的实现方法
前言 这篇文章的代码片段位于 vue 的单文件组件中,即以 .vue 结尾的文件中,本文说明的只是一种实现方法,既不是唯一的方法也不是最好的方法,如果大家有更好的方法可以留言,大家进行讨论. 第一步 首先,一定要先定义变量: // app.vue <script> data () { return { // 定义 getData getData:{}, // 定义自定义指令的绑定值 ifUpdate:true } } 第二步 然后要使用 ajax 的话,要在 index.html 里引入 jq
-
Vue实现用户自定义字段显示数据的方法
如下: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible&q
-
Android操作SQLite数据库(增、删、改、查、分页等)及ListView显示数据的方法详解
本文实例讲述了Android操作SQLite数据库(增.删.改.查.分页等)及ListView显示数据的方法.分享给大家供大家参考,具体如下: 由于刚接触android开发,故此想把学到的基础知识记录一下,以备查询,故此写的比较啰嗦: 步骤如下: 一.介绍: 此文主要是介绍怎么使用android自带的数据库SQLite,以及把后台的数据用ListView控件显示 二.新建一个android工程--DBSQLiteOperate 工程目录: 三.清单列表AndroidManifest.xml的配置
-
python从sqlite读取并显示数据的方法
本文实例讲述了python从sqlite读取并显示数据的方法.分享给大家供大家参考.具体实现方法如下: import cgi, os, sys import sqlite3 as db conn = db.connect('test.db') cursor = conn.cursor() conn.row_factory = db.Row cursor.execute("select * from person") rows = cursor.fetchall() sys.stdout
-
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: <?xml version="1.0" standalone="yes"?> <student> <stuinfo> <stuName>张秋丽</stuName> <stuSex>女 </stuSex> <stuAge>18</stuAge>
-
在vue里面设置全局变量或数据的方法
实例如下: const MyPlugin = { // install方法是必需的 // // 包含两个参数:Vue 构造器,一个可选的选项对象 install(Vue, options) { Vue.prototype.test = "test" ; Vue.prototype.wechat = "my wechat!"; } }; export default MyPlugin 此方法可以单独起一个文件,在引入到需要的页面里面,就可以用vue实例取到相应数据,像
-
vue配置请求本地json数据的方法
本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa
-
Vue刷新修改页面中数据的方法
因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初始化代码: <script type="text/javascript" charset="utf-8"> mui.init(); var data = { dx:
-
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
本文通过将同一个数据集在三种不同的简便项窗口部件中显示.三个窗口的数据得到实时的同步,数据和视图分离.当添加或删除数据行,三个不同的视图均保持同步.数据将保存在本地文件中,而非数据库.对于小型和临时性数据集来说,这些简便窗口部件非常有用,可以用在非单独数据集中-数据自身的显示,编辑和存储. 所使用的数据集: /home/yrd/eric_workspace/chap14/ships_conv/ships.py #!/usr/bin/env python3 import platform from
-
layui实现鼠标移动到单元格上显示数据的方法
如下所示: { field : 'operNm', //title是纯文本 title : '<span title="用户姓名">用户姓名</span>', width : 150, align : 'center', //下面的是从数据库里取出来的数据 templet:'<div><span title="{{d.year}}">{{d.year}}</span></div>' //判空 /
-
react分页显示数据的方法
目录 父组件listBox 列表组件List 按钮组件PageButton 去年年底,尝试着用react写个组件化的页面! 里面有一个list页面弄了一下数据的分页展示 展示一下主要三个组件:父组件listBox.列表组件List.按钮组件PageButton 父组件listBox const listData = [{ key:"001", idd:"001", title:"webstorm连接github,方便的管理仓库", time:&q