<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- 导入View.js包 -->
<script src="https://cdn.staticfile.org/vue/2.6.12/vue.js"></script>
<!-- 导入bootstrap样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!--<link> 标签定义文档与外部资源的关系。<link> 标签最常见的用途是链接样式表-->
</head>
<body>
<div id="app">
<!-- 添加品牌，panel面板(主面板) -->
<div class="panel panel-primary">
<!-- panel面板header -->
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<!-- panel面板body -->
<div class="panel-body form-inline">
<label><!--<label> 标签为 input 元素定义标注（标记）-->
Id:
<input type="text" class="form-control" v-model="id"/>
<!--v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值-->
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.enter="add()" />
<!--@keyup(键盘事件)是按键松开，当指定的按键松开会触发的事件.
@keyup.enter回车按键松开-->
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
<!--@click表示绑定事件-->
<label>
搜索：
<!-- 这里v-color中如果不加单引号，表示data中的变量，加了表示字符串 -->
<input type="text" class="form-control" v-model="keywords" v-focus v-color="'red'" />
</label>
<label>
<input type="file" id="file1" multiple/>
<!--multiple 属性规定允许用户输入到 <input> 元素的多个值。
注意：multiple 属性适用于以下 input 类型：email 和 file-->
</label>
</div>
</div>
<!-- 品牌列表 -->
<table class="table table-bodered table-hover table-striped">
<!-- 表头 -->
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr v-for="item in search(keywords)" :key="item.id">
<!-- 这里key如果不加：就当做一个字符串了。keywords关键字 -->
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.ctime | dateFormat("yyyy-mm-dd") }}</td>
<td>
<a href="#" @click.prevent="del(item.id)">删除</a>
<!--@click.prevent函数会阻止触发dom的原始事件，而去执行特定的事件-->
</td>
</tr>
</tbody>
</table>
</div>
<script>
var arrLogo = [];
window.addEventListener('load', () => {
//addEventListener() 方法用于向指定元素添加监听事件
const f = document.getElementById('file1');
f.addEventListener('change', evt => {
const input = evt.target;
//const声明一个只读的常量。一旦声明，常量的值就不能改变。常量所谓的常量就是不能改变的值
arrLogo = upload(input);
});
});
// 全局过滤器，进行时间格式化
/*filter过滤器
DATE_FORMAT(date, format) 函数用于以不同的格式显示日期/时间数据
date参数是合法的日期。format规定日期/时间的输出格式
pattern是验证输入字段的意思*/
Vue.filter('dateFormat',function(dateStr,pattern){
// 根据字符串拿到时间
var dt = new Date(dateStr)
// 拿到年月日
var y = dt.getFullYear()
var m = (dt.getMonth()+1).toString().padStart(2,'0') // 使用ES6提供的方法，将月份补充为2位
/*padStart()方法用于用另一个字符串填充一个字符串,直到达到给定的长度
用法:string.padStart(targetLength, padString)
参数：此方法接受上述和以下所述的两个参数：
targetLength:它是原始字符串填充后最终字符串的长度。如果该值小于原始字符串的长度，则返回原始字符串。
padString:这是要用原始字符串填充的字符串。如果此值太长而无法在targetLength内，则它将从结尾处截断。默认使用的字符串是空格字符(“”)。
返回值：它返回用给定字符串填充到给定长度的最终字符串。*/
var d = dt.getDate().toString().padStart(2,'0')
// 如果输入格式为yyyy-mm-dd，toLowerCase()把输入字符串中的大写字母全部转换为小写字符
if (pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
}else{ // 如果输入格式
var hh = dt.getHours().toString().padStart(2,'0')
var mm = dt.getMinutes().toString().padStart(2,'0')
var ss = dt.getSeconds().toString().padStart(2,'0')
return `${y}-${m}-${d}:${hh}:${mm}:${ss}`
}
})
// 自定义按键修饰符，keyCodes自定义按键修饰符别名
Vue.config.keyCodes.f2 = 113 // 将f2键的keyCode为113，将113和f2绑定
// 自定义指令，调用指令时需要加v-
Vue.directive('focus',{
bind: function(el){
},
inserted: function(el){
// inserted 表示元素插入到DOM中到时候，会执行inserted函数，el为JS原生元素
el.focus() // 从内存渲染到页面上的时候，执行inserted focus焦点
}
})
Vue.directive('color',{
bind: function(el,binding){
// binding.expression = 'red',binding.value=red
el.style.color = binding.value // 一加载到内存中去，就调用
} // 不管元素有没有被插入到页面中去，这个元素就已经有了一个内联样式
})
function upload(input) {
let arrLogo = [];
//支持chrome IE10
if (window.FileReader) {
//FileReader对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据
var file = input.files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
let param = JSON.parse(this.result);
//parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数
arrLogo.push(param['Logo1']);
arrLogo.push(param['Logo2']);
arrLogo.push(param['Logo3']);
arrLogo.push(param['Logo4']);
arrLogo.push(param['Logo5']);
arrLogo.push(param['Logo6']);
arrLogo.push(param['Logo7']);
arrLogo.push(param['Logo8']);
arrLogo.push(param['Logo9']);
arrLogo.push(param['Logo10']);
}
reader.readAsText(file);
//readAsText(file,encoding)：按字符读取文件内容，结果用字符串形式表示
}
return arrLogo;
}
var vm = new Vue({
el:'#app',
data:{
id:'', // 与Id文本框进行了双向绑定，可以自动拿到文本框里的值
name:'', // 与Name 文本框进行了双向绑定，可以自动拿到文本框里的值
keywords:'', // 搜索的关键字
list:[
{ id:1, name:'奔驰',ctime:new Date() },
{ id:2, name:'宝马',ctime:new Date() }
]
},
methods:{
add(){ // 添加一个car的信息
if((this.id.length == 0) && (this.name.length == 0))
{
alert('id 和 name不能为空');
return;
}
if(this.id.length == 0)
{
alert('id不能为空');
return;
}
if(this.name.length == 0)
{
alert('name不能为空');
return;
}
// 判断该品牌是否存在
/*
if (window.FileReader) {
var file = input.files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
let param = JSON.parse(this.result);
arrLogo.push(param['Logo1']);
arrLogo.push(param['Logo2']);
arrLogo.push(param['Logo3']);
arrLogo.push(param['Logo4']);
arrLogo.push(param['Logo5']);
arrLogo.push(param['Logo6']);
arrLogo.push(param['Logo7']);
arrLogo.push(param['Logo8']);
arrLogo.push(param['Logo9']);
arrLogo.push(param['Logo10']);
console.log(param);
console.log("key = id, value = %d" , param['id']);
console.log("key = success, value = %s" , param['success']);
alert("key = id, value = " + param['id']);
alert("key = strAnodeMaterial, value = " + param['result']['strAnodeMaterial']);
console.log("key = strAnodeMaterial, value = %s" , param['result']['strAnodeMaterial']);
console.log("key = strBatchNumber, value = %s" , param['result']['strBatchNumber']);
console.log("key = strContainerNumber, value = %s" , param['result']['strContainerNumber']);
console.log("key = strCustomer, value = %s" , param['result']['strCustomer']);
console.log("key = strDiaphragm, value = %s" , param['result']['strDiaphragm']);
console.log("key = strElectrolyte, value = %s" , param['result']['strElectrolyte']);
console.log("key = strNegativeMaterial, value = %s" , param['result']['strNegativeMaterial']);
console.log("key = strOrderNO, value = %s" , param['result']['strOrderNO']);
console.log("key = strPlace, value = %s" , param['result']['strPlace']);
console.log("key = strProjectClassify, value = %s" , param['result']['strProjectClassify']);
console.log("key = strShareOrder, value = %s" , param['result']['strShareOrder']);
}
//reader.readAsText(file);
reader.readAsText('汽车品牌文件.json');
}
*/
console.log(arrLogo);
/*
let arrLogo = [
"宝马汽车集团(BMW)",
"戴姆勒集团(Daimler)",
"菲亚特集团(Fiat)",
"福特集团(Ford)",
"通用汽车集团(General Motors,GM)",
"PSA标致雪铁龙集团",
"雷诺-日产联盟(Renault-Nissan Alliance)",
"丰田汽车集团(Toyota)",
"大众汽车集团(Volkswagen AG)"
];
*/
if(!arrLogo.includes(this.name))
{
alert('该品牌不存在！');
return;
}
// console.log('ok!')
// 1. 获取到id和name
// 2. 组织出一个对象
var car = {id:this.id,name:this.name,ctime:new Date()}
// 3. 把对象添加的 data 中去
this.list.push(car)
this.id = ''
this.name = ''
},
del(id){ // 根据删除一个car的信息
// 根据id查询对象在list中的index
var index = this.list.findIndex(item => { // 遍历list,将集合中每个元素传入item,
if (item.id == id){ // 如果返回true，findIndex方法将这个item对应的index 返回
return true
}
})
this.list.splice(index,1)
//splice主要用来对js中的数组进行操作，包括删除，添加，替换等。index,1中index为位置。1是删除一行
},
search(keywords){
var newList = this.list.filter(item => { // 遍历list将集合中每个元素传入item,
if (item.name.includes(keywords)){ // 如果item.name中包含keywords,返回item
return item
}
})
return newList
}
}
});
</script>
</body>
</html>
08-10
409
409
08-22
659
659
02-02
1324
1324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
