课堂测试"/>
9.20课堂测试
产品界面管理
<!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>
更多推荐
9.20课堂测试
发布评论