说说几个常用的字符操作函数filter、some的差别
filter返回一个新数组,新数组中的元素是通过检查原数组中符合条件的所有元素。不会对空数组进行检测,也不会改变原始数组
some方法用于检测元素是否满足制定条件,会依次执行数组中的每个元素
indexOf和includes的差别
indexOf返回的是数值型的而includes返回的是布尔型的
数组中的indexOf不能判断数组中是否有NaN而includes可以
谈谈你对v-on的理解
通过 v-on 指令绑定一个事件监听器,通过它调用 Vue 中定义的方法
@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>
m12()–m22()–m32()–m31()–m21()–m11()
定义一个私有指令,使加载该指令的标签都拥有红色字体
<!DOCTYPE html> <html> <head>
<meta charset="utf-8">
<title>红色字体</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
</script> </head> <body> <div id="app">
<div v-runoob="{ color: 'red', text: 'ww' }">
</div>
</div>
<script>
Vue.directive('runoob', function (el, binding) {
el.innerHTML = binding.value.text
el.style.color = binding.value.color
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
**产品管理功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品管理</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/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: 'my-e', gs: 'my-e茶饮有限公司',jg:100},
{name: '一点点', gs: '一点点有限公司',jg:100},
{name: 'coco', gs: '都可有限公司',jg:100},
{name: '喜茶', gs: '喜茶有限公司',jg:100},
],
},
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>