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
- 定义一个私有指令，使加载该指令的标签都拥有红色字体。
<script src="js/vue.js"></script>
<div id="app">
<p :style='styles'>123</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
styles: {
color: 'red',
}
}
})
</script>
管理列表
<!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>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
CSGO武器管理界面
</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="searchName">
<button @click="search">查询武器</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="name">
所属阵容：<input type="text" v-model="gs">
武器价格：<input type="text" v-model="jg">
<button @click="add" >添加武器</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)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
gs: '',
jg: '',
searchName: '',
users: [
{name: 'AK47', gs: '恐怖分子',jg:2700},
{name: 'M4A4', gs: '反恐精英',jg:3100},
{name: 'AUG', gs: '反恐精英',jg:3150},
{name: 'SG 553', gs: '恐怖分子',jg:2750},
{name: 'R8 Revolver', gs: '恐怖分子',jg:850},
{name: 'CZ75-Auto', gs: '反恐精英',jg:500},
],
},
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) => {
var flag = user.name.includes(this.searchName);
return flag;
})
return resultArray;
},
}
})
</script>
</body>
</html>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
