产品界面管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!--2、创建一个视图div，id是app-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
产品管理界面
</h3>
</div>
<div id="app" class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
添加产品
</h3>
</div>
<div class="panel-body">
产品名称：<input type="text" v-model="name">
产品公司：<input type="text" v-model="gs">
产品价格：<input type="text" v-model="jg">
<button @click="add" class="btn btn-primary" style="height: 28px;margin-top: -2px">新增产品</button>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
查询产品
</h3>
</div>
<div class="panel-body">
姓名：<input type="text" v-model="searchName">
<button @click="search" class="btn btn-info" style="height: 28px;margin-top: 1px">查询产品</button>
</div>
</div>
<table class="table table-striped ">
<thead>
<tr>
<td><input type="checkbox"></td>
<td>产品名称</td>
<td>产品公司</td>
<td>产品价格</td>
<td>是否删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in search()">
<td><input type="checkbox"></td>
<td>{{user.name}}</td>
<td>{{user.gs}}</td>
<td>{{user.jg}}</td>
<td>
<button @click="del(index)" class="btn btn-danger">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--1、导入vue.js-->
<script src="js/vue.js"></script>
<script>
/*3、创建vm对象*/
var vm = new Vue({
el: '#app',
data: {
name: '',
gs: '',
jg: '',
searchName: '',
users: [
{name: '敌敌畏', gs: '阿尔塔科技有限公司',jg:1800},
{name: '印度神油', gs: '百臻堂国际贸易有限公司',jg:1800},
{name: '杜蕾斯', gs: 'SSL',jg:1800},
{name: '加多宝', gs: '加多宝饮料有限公司',jg:1800},
],
},
methods: {
add() {
var user = {
name: this.name,
gs: this.gs,
jg:this.jg,
}
this.users.push(user);
},
del(index) {
this.users.splice(index, 1);
},
search() {
var resultArray=this.users.filter((user) => {
/*判断user是否符合条件，如果符合就返回true*/
var flag = user.name.includes(this.searchName);
return flag;
})
return resultArray;
},
}
})
</script>
</body>
</html>
课堂题目
Vue作业2019-9-20
-
说说几个常用的字符操作函数filter、some的差别
调用 filter 的结果是创建一个新数组，数组的元素是通过所提供函数通过测试的所有元素
some表示只要数组元素某一项满足即可 -
indexOf和includes的差别
看函数的返回值：indexOf返回的是数值型的而includes返回的是布尔型的
都可以支持第二参数，而且的第二个参数都支持负数形式
数组中的indexOf不能判断数组中是否有NaN而includes可以 -
谈谈你对v-on的理解
v-on,它是来绑定事件监听器,这样我们就可以做一些交互了.
-
@click="del(index)"和@click="del("index")"的差别是什么@click="del(index)"使用双引号关闭了，运行不会报错
@click="del(“index”)"无法关闭，运行会报错 -
下列代码六个函数的执行顺序是什么
<div onclick="m11();" @click.capture="m12()"> <div onclick="m21();" @click.capture="m22()"> <button onclick="m31();" @click="m32()">一个按钮</button> </div> </div>先执行32 再执行 31 再执行 22 再执行 21 再执行12 再执行11
-
定义一个私有指令，使加载该指令的标签都拥有红色字体。
<div id="app">
<p :style='styles'>123</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
styles: {
color: 'red',
}
}
})
</script>
9624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
