vue常用特性:
表单的基本操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form div {
height: 40px;
line-height: 40px;
}
form div:nth-child(4) {
height: auto;
}
form div span:first-child {
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<form action="http://itcast.cn">
<div>
<span>姓名:</span>
<span>
<!-- input输入框:使用双向数据绑定 v-model -->
<input type="text" v-model='uname' @keyup.delete='clearContent'>
</span>
</div>
<!--
点选按钮:radio
1. v-model='gender' 统一绑定同一个值,默认值和value值其中一个相同,此时:1或者2
2. 指定value值,用于区分选择的哪个。一般是字符串 1 或者 2
3. 一般使用input(type="radio")和label连用
-->
<div>
<span>性别:</span>
<span>
<input type="radio" id="male" value="1" v-model='gender'>
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model='gender'>
<label for="female">女</label>
</span>
</div>
<!--
多选框:checkbox
1. v-model='hobby' 统一绑定同一个数组。默认值就是value值,也可以是空数组
2. 指定value值,用于区分选择的哪个。一般是字符串 1 或者 2
3. 一般使用input(type="checkbox")和label(指定for="xx"属性)连用
-->
<div>
<span>爱好:</span>
<input type="checkbox" id="ball" value="1" v-model='hobby'>
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model='hobby'>
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model='hobby'>
<label for="code">写代码</label>
</div>
<!--
选择框:select
1. select 和 option 一块使用。
2. 为 select 绑定 v-model='occupation' =》 单选定义data:occupation: 3
为 select 绑定multiple属性 =》 多选定义data:occupation: ['2','3']
3. 为 option 添加 value属性,用于区分选择了哪个。一般是字符串 1 或者 2
-->
<div>
<span>职业:</span>
<select v-model='occupation' multiple>
<option value="0">请选择职业...</option>
<option value="1">教师</option>
<option value="2">软件工程师</option>
<option value="3">律师</option>
</select>
</div>
<!--
文本域:textarea
1. 使用双向数据绑定:v-model='desc'
-->
<div>
<span>个人简介:</span>
<textarea v-model='desc'></textarea>
</div>
<div>
<input type="submit" value="提交" @click.prevent='handle'>
</div>
</form>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
表单基本操作
*/
var vm = new Vue({
el: '#app',
data: {
uname: '',
gender: 2,
hobby: ['2','3'],
// occupation: 3
occupation: ['2','3'],
desc: 'nihao'
},
methods: {
// 阻止表单的默认方式提交,使用js的方式提交数据。
handle: function(){
// console.log(this.uname)
// console.log(this.gender)
// console.log(this.hobby.toString())
// console.log(this.occupation)
console.log(this.desc)
// 真实项目:需要调用接口,完成表单提交功能
},
clearContent: function(){
this.uname = ''
}
}
});
</script>
</body>
</html>
表单域修饰符用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!--
1. 如果不转换,默认输出字符串。例如:输入框填写 12,(点击事件加13)输出结果:1213
2. 如果转换为数值。v-model.number='age' 例如:输入框填写 12,(点击事件加13)输出结果:25
-->
<input type="text" v-model.number='age'>
<!--
trim:去掉开始和结尾的空格但字符串中间的空格无法去掉 v-model.trim='info'
-->
<input type="text" v-model.trim='info'>
<!--
lazy:将input事件转化为change事件
input事件: 内容只要改变就会触发。例如:v-model双向数据绑定,实际上就是input事件
change事件:失去焦点的时候触发。例如:v-model.lazy='msg' 应用于:表单验证
-->
<input type="text" v-model.lazy='msg'>
<div>{{msg}}</div>
<button @click='handle'>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 表单域修饰符
var vm = new Vue({
el: '#app',
data: {
age: '',
info: '',
msg: ''
},
methods: {
handle: function () {
console.log(this.age + 13)
console.log(this.info.length)
}
}
});
</script>
</body>
</html>
自定义指令
自定义指令–基本用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令基本用法</title>
</head>
<!--
刷新页面:鼠标自动定位到元素当中(只能定位一个:v-focus)
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
1. 自定义指令的语法规则(获取元素焦点)
Vue.directive('focus', {
inserted: function(el) {
// 获取元素的焦点
el.focus();
}
});
2. 自定义指令用法
<input type="text" v-focus>
-->
<body>
<div id="app">
<input type="text" v-focus>
<input type="text">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 自定义全局指令:focus
Vue.directive('focus', {
inserted: function (el) {
// el表示指令所绑定的元素
// 刷新页面:鼠标自动定位到元素当中(只能定位一个:v-focus)
el.focus();
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function () {
}
}
});
</script>
</body>
</html>
自定义指令–带参数(改变输入框背景色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带参数的自定义指令</title>
</head>
<!-- 自定义指令:带参数的自定义指令(改变元素背景色)
bind:只调用一次,指令第一次绑定到元素时调用。
Vue.directive('color', {
bind: function(el, binding) {
// 根据指令的参数设置背景色
el.style.backgroundColor = binding.value.color
}
});
指令的用法: <input type="text" v-color='msg'>
-->
<body>
<div id="app">
<input type="text" v-color='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 自定义全局指令-带参数(改变元素背景色)
// binding 是一个对象,包含value属性
// binding.value 也是一个对象,包含color属性 binding.value.color
Vue.directive('color', {
bind: function (el, binding) {
console.log(binding);
// 根据指令的参数设置背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'blue'
}
},
methods: {
handle: function () {
}
}
});
</script>
</body>
</html>
自定义局部指令(自动聚焦、改变输入框背景色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部指令</title>
</head>
<!-- 局部指令:只能在本组件中使用。
放在vue实例里面,作为vue实例对象的属性或者方法
directives: {
color: {
bind: function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function(el) {
// 获取元素的焦点
el.focus();
}
}
}
-->
<body>
<div id="app">
<input type="text" v-color='msg'>
<input type="text" v-focus>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 自定义指令-局部指令
// 应用范围:只能在本组件中使用
var vm = new Vue({
el: '#app',
data: {
msg: {
color: 'red'
}
},
methods: {
handle: function () {
}
},
directives: {
color: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color;
}
},
focus: {
inserted: function (el) {
// 获取元素的焦点
el.focus();
}
}
}
});
</script>
</body>
</html>
计算属性
作用:如果函数体内的逻辑比较复杂耗时,可以考虑使用计算属性。
计算属性基本用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{reverseString}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 为什么需要计算属性?
// 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁!
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao'
},
computed: {
reverseString: function () {
return this.msg.split('').reverse().join('');
}
}
});
</script>
</body>
</html>
计算属性和方法的区别:
-
计算属性是基于它们的依赖进行缓存的
其中依赖是指
data中的数据
。只要data中的数据不发生变化,计算的结果始终被缓存。如果data中的数据发生 变化,则会重新计算。
-
方法不存在缓存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{reverseString}}</div>
<div>{{reverseString}}</div>
<div>{{reverseMessage()}}</div>
<div>{{reverseMessage()}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 计算属性与方法的区别:计算属性是基于依赖进行缓存的,而方法不缓存
var vm = new Vue({
el: '#app',
data: {
msg: 'Nihao',
num: 100
},
methods: {
reverseMessage: function () {
// 而方法不存在缓存,所以使用2次,控制台打印2次。
console.log('methods')
return this.msg.split('').reverse().join('');
}
},
computed: {
reverseString: function () {
// 因为计算属性有缓存,基于同样的数据 =》 即使页面渲染使用2次,控制台也只有一次打印。
console.log('computed')
// return this.msg.split('').reverse().join('');
var total = 0;
for (var i = 0; i <= this.num; i++) {
total += i;
}
return total;
}
}
});
</script>
</body>
</html>
侦听器
- 侦听器的应用场景:数据变化时执行异步或开销较大的操作
- 原理:数据一旦发生变化就通知侦听器所绑定的方法
侦听器的基本用法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>
<span>名:</span>
<span>
<input type="text" v-model='firstName'>
</span>
</div>
<div>
<span>姓:</span>
<span>
<input type="text" v-model='lastName'>
</span>
</div>
<div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 侦听器的应用场景:数据变化时执行异步或开销较大的操作
// 原理:数据一旦发生变化就通知侦听器所绑定的方法
// data:{fullName: 'Jim Green'} 与 watch 侦听器 连用
var vm = new Vue({
el: '#app',
data: {
firstName: 'Jim',
lastName: 'Green',
// fullName: 'Jim Green'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
},
watch: {
// val表示 firstName/lastName 的最新值:
firstName: function (val) {
this.fullName = val + ' ' + this.lastName;
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val;
}
}
});
</script>
</body>
</html>
侦听器案例:用户名是否可用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证用户名是否可用</title>
</head>
<body>
<div id="app">
<div>
<span>用户名:</span>
<span>
<input type="text" v-model.lazy='uname'>
</span>
<span>{{tip}}</span>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// v-model.lazy='uname' 输入框里面内容改变且失去焦点的时候触发watch事件
// 侦听器:验证用户名是否可用
// 需求:输入框中输入姓名,失去焦点触发事件!
// 1、采用侦听器监听用户名的变化
// 2、调用后台接口进行验证
// 3、根据验证的结果调整提示信息
var vm = new Vue({
el: '#app',
data: {
uname: '',
tip: ''
},
methods: {
// 处理异步任务:如调用接口
checkName: function (uname) {
// 调用接口,但是可以使用定时任务的方式模拟接口调用
console.log(this); // vue实例对象
var that = this;
setTimeout(function () {
// console.log(this);
// 结果:执行window
// 模拟接口调用
if (uname == 'admin') {
that.tip = '用户名已经存在,请更换一个';
} else {
that.tip = '用户名可以使用';
}
}, 2000);
}
},
watch: {
uname: function (val) {
// 异步任务:调用后台接口验证用户名的合法性
this.checkName(val);
// 同步任务:如果数据发生变化,修改提示信息
this.tip = '正在验证...';
}
}
});
</script>
</body>
</html>
过滤器
过滤器的作用是什么?
格式化数据
比如:将字符串格式化为首字母大写、将日期格式化为指定的格式等
过滤器的基本用法
全局过滤器
- 自定义过滤器
Vue.filter('过滤器名称',function(value){
// return 过滤器处理的结果 (业务逻辑)
})
- 过滤器的使用(2种方法)
- 插值表达式:
<div>{{msg | upper}}</div>
upper是过滤器的名称
支持级联操作:过滤器也支持同时使用多个,将前面处理的结果再作为下一个过滤器的输入值,
最终再进行处理从而再产生新的结果。例如:先变成大写--再变成小写
<div>{{msg | upper | lower}}</div> upper、lower 是过滤器的名称
- 属性绑定:
<div :abc='msg | upper'>测试数据</div> upper是过滤器的名称
局部过滤器
filters: {
过滤器名称: function(){
}
}
代码示例:过滤器的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!--
自定义过滤器:全局 和 局部 两种形式
..................................全局过滤器的用法
1.自定义过滤器
Vue.filter('过滤器名称',function(value){
// return 过滤器处理的结果 (业务逻辑)
})
2.过滤器的使用(2种方法)
1、插值表达式 <div>{{msg | upper}}</div> upper是过滤器的名称
支持级联操作:过滤器也支持同时使用多个,将前面处理的结果再作为下一个过滤器的输入值,
最终再进行处理从而再产生新的结果
先变成大写--再变成小写
<div>{{msg | upper | lower}}</div> upper、lower 是过滤器的名称
2、属性绑定 <div :abc='msg | upper'>测试数据</div> upper是过滤器的名称
..................................局部过滤器的用法
filters: {
过滤器名称: function(){
}
}
.................................................
过滤器操作逻辑:
val.charAt(0).toUpperCase() 获取首字母并且变成大写
val.charAt(0).toLowerCase() 获取首字母并且变成小写
-->
<body>
<div id="app">
<input type="text" v-model='msg'>
<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div :abc='msg | upper'>测试数据</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 自定义全局过滤器:
Vue.filter('lower', function (val) {
// 获取首字母并且变成小写 val.charAt(0).toLowerCase()
// 从第二个字符开始,截取到最后 val.slice(1)
// 然后将首字符和后面的字符进行拼接
return val.charAt(0).toLowerCase() + val.slice(1);
});
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
// 局部过滤器
filters: {
upper: function (val) {
// 获取首字母并且变成大写 val.charAt(0).toUpperCase()
// 从第二个字符开始,截取到最后 val.slice(1)
// 然后将首字符和后面的字符进行拼接
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
});
</script>
</body>
</html>
带参数的过滤器,格式化日期(全能)
日期格式化规则:
y:年,
M:年中的月份(1-22)
d:月份中的天(1-31)
h:小时(0-23)
m:分(0-59)
s:秒(0-59)
s:毫秒(0-999)
q:季度(1-4)
具体代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用过滤器:格式化日期</title>
</head>
<!-- 带参数的过滤器
Vue.filter('format', function(value, arg) {
return value就是过滤器传递过来的参数,表示要处理的数据
})
过滤器的使用 <div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
使用过滤器的时候,后面可以传参 通过括号把参数传递过来;但是这个参数是arg接收的
而第一个参数value是默认要处理的data数据
-->
<body>
<div id="app">
<div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
<div>{{date | format('yyyy.MM.dd')}}</div>
<div>{{date | format('yyyy.MM.dd hh:mm:ss')}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 定义全局过滤器(借助第三方函数)
Vue.filter('format', function (value, arg) {
// 第三方函数
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
// 用法:将参数传递给 dateFormat(value, arg);
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</body>
</html>
动态响应式数据处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<!--
动态处理响应式数据:数组的索引
响应式: Vue.set(vm.list, 2, 'lemon');
响应式: vm.$set(vm.list, 1, 'lemon');
非响应式:vm.list[1] = 'lemon'; 通过修改下标,不是响应式的
向对象中添加属性:对象的属性
响应式: Vue.set(vm.list, 2, 'lemon')
响应式: vm.$set(vm.info, 'gender', 'female');
非响应式:vm.info.gender = 'male';
-->
<body>
<div id="app">
<ul>
<li v-for='item in list'>{{item}}</li>
</ul>
<div>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.gender}}</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
list: ['apple', 'orange', 'banana'],
info: {
name: 'lisi',
age: 12
}
},
});
// vm.list[1] = 'lemon';
// Vue.set(vm.list, 2, 'lemon');
vm.$set(vm.list, 1, 'lemon');
// vm.info.gender = 'male';
vm.$set(vm.info, 'gender', 'female');
</script>
</body>
</html>
综合案例:图书管理(增、删、改)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.grid {
margin: auto;
width: 530px;
text-align: center;
}
.grid table {
border-top: 1px solid #C2D89A;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10;
border: 1px dashed #F3DCAB;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: #F3DCAB;
}
.grid .book {
padding-bottom: 10px;
padding-top: 5px;
background-color: #F3DCAB;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #C2D89A;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号:
</label>
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
<label for="name">
名称:
</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled="submitFlag">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数:</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span>|</span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 图书管理-添加图书
// 自定义全局指令:(自动获取焦点)
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
// 定义全局过滤器(格式化日期)
Vue.filter('format', function (value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
flag: false,
submitFlag: false,
id: '',
name: '',
books: []
},
methods: {
handle: function () {
if (this.flag) {
// 编辑图书
// 就是根据当前的ID去更新数组中对应的数据
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
// 完成更新操作之后,需要终止循环
return true;
}
});
this.flag = false;
} else {
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = 2525609975000;
this.books.push(book);
// 清空表单
this.id = '';
this.name = '';
}
// 清空表单
this.id = '';
this.name = '';
},
toEdit: function (id) {
// 禁止修改ID
this.flag = true;
console.log(id)
// 根据ID查询出要编辑的数据
var book = this.books.filter(function (item) {
return item.id == id;
});
console.log(book)
// 把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
},
deleteBook: function (id) {
// 删除图书
// 根据id从数组中查找元素的索引
// 数组的findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
// var index = this.books.findIndex(function(item){
// return item.id == id;
// });
// 根据索引删除数组元素
// splice(开始修改的位置,移除的数组元素的个数,要添加进数组的元素)方法
// 通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
// 注意:要添加进数组的元素,从start 位置开始。如果不指定,则 splice() 将只删除数组元素
// this.books.splice(index, 1);
// -------------------------
// 方法二:通过filter方法进行删除
this.books = this.books.filter(function (item) {
return item.id != id;
});
}
},
computed: {
total: function () {
// 计算图书的总数:计算图书的长度
return this.books.length;
}
},
watch: {
name: function (val) {
// val表示输入的最新的图书名称
// 侦听器:验证图书名称是否已经存在
// 数组的some()方法,判断数组中是否有满足条件的数据
// 只要有一个满足条件,返回true
var flag = this.books.some(function (item) {
return item.name == val;
});
if (flag) {
// 图书名称存在,禁用提交按钮
this.submitFlag = true;
} else {
// 图书名称不存在,启用提交按钮
this.submitFlag = false;
}
}
},
mounted: function () {
// 生命周期:(图书数据处理:调用后台接口,进行模板渲染)
// 该生命周期钩子函数被触发的时候,模板已经可以使用。可以把数据放进去了
// 一般此时用于获取后台数据,然后把数据填充到模板
var data = [{
id: 1,
name: '三国演义',
date: 2525609975000
}, {
id: 2,
name: '水浒传',
date: 2525609975000
}, {
id: 3,
name: '红楼梦',
date: 2525609975000
}, {
id: 4,
name: '西游记',
date: 2525609975000
}];
this.books = data;
}
});
</script>
</body>
</html>