Vue 指令 v-for
1. 作用:
基于数据循环, 多次渲染整个元素 → 数组、对象、数字...
2. 遍历数组语法:
v-for = "(
item, index
) in
数组
"
Ø
item
每一项,
index
下标
Ø
省略 index: v-for = "
item in 数组
"
v-for 中的 key
语法:
key属性 = "唯一标识",
key作用:给元素添加的
唯一标识。
作用:
给列表项添加的
唯一标识
。便于Vue进行列表项的
正确排序复用
。
注意点:
1. key 的值只能是
字符串
或
数字类型
2. key 的值必须具有
唯一性
3. 推荐使用
id
作为 key(唯一),不推荐使用
index
作为 key(会变化,不对应)
<li v-for="(item, index) in xxx" :key="唯一值">
Vue 指令 v-model
1. 作用:
给
表单元素
使用,
双向数据绑定
→ 可以快速
获取 或 设置
表单元素内容
① 数据变化 → 视图自动更新
②
视图
变化 →
数据
自动更新
2. 语法:
v-model = '变量'
综合案例:小黑记事本
功能需求:
① 列表渲染
② 删除功能
③ 添加功能
④ 底部统计 和 清空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/index.css" />
<title>记事本</title>
</head>
<body>
<!-- 主体区域 -->
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input v-model="todoName" placeholder="请输入任务" class="new-todo" />
<button @click="add" class="add">添加任务</button>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item, index) in list" :key="item.id">
<div class="view">
<span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
<button @click="del(item.id)" class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length > 0">
<!-- 统计 -->
<span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
<!-- 清空 -->
<button @click="clear" class="clear-completed">
清空任务
</button>
</footer>
</section>
<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 添加功能
// 1. 通过 v-model 绑定 输入框 → 实时获取表单元素的内容
// 2. 点击按钮,进行新增,往数组最前面加 unshift
const app = new Vue({
el: '#app',
data: {
todoName: '',
list: [
{ id: 1, name: '跑步一公里' },
{ id: 3, name: '游泳100米' },
]
},
methods: {
del (id) {
// console.log(id) => filter 保留所有不等于该 id 的项
this.list = this.list.filter(item => item.id !== id)
},
add () {
if (this.todoName.trim() === '') {
alert('请输入任务名称')
return
}
this.list.unshift({
id: +new Date(),
name: this.todoName
})
this.todoName = ''
},
clear () {
this.list = []
}
}
})
</script>
</body>
</html>
功能总结:
① 列表渲染:
v-for key
的设置 {{ }} 插值表达式
② 删除功能
v-on
调用传参
filter
过滤 覆盖修改原数组
③ 添加功能
v-model
绑定
unshift
修改原数组添加
④ 底部统计 和 清空
数组.length累计长度
覆盖数组清空列表
v-show
控制隐藏
指令修饰符
通过
"."
指明一些指令
后缀
,不同
后缀
封装了不同的处理操作
→
简化代码
① 按键修饰符
@keyup.enter
→
键盘回车监听
②
v-model
修饰符
v-model.trim
→
去除首尾空格
v-model.number
→
转数字
③ 事件修饰符
@
事件名
.stop →
阻止冒泡
@
事件名
.prevent →
阻止默认行为
v-bind 对于样式控制的增强
为了方便开发者进行
样式控制
, Vue 扩展了
v-bind
的语法,可以针对
class 类名
和
style 行内样式
进行控制 。
v-bind 对于样式控制的增强 - 操作class
语法
:class = "对象/数组"
①
对象
→ 键就是类名,值是布尔值。如果值为
true
,有这个类,否则没有这个类
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用场景:一个类名,来回切换
②
数组
→ 数组中所有的类,都会添加到盒子上,本质就是一个
class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
适用场景:批量添加或删除类
:class="['pink', 'big']"
v-bind 对于样式控制的增强 - 操作style
语法
:style = "样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
适用场景:某个具体属性的动态设置
v-model 应用于其他表单元素
常见的表单元素都可以用 v-model 绑定关联 → 快速
获取
或
设置
表单元素的值
v-model 应用于其他表单元素
它会根据
控件类型
自动选取
正确的方法
来更新元素
输入框 input:text
文本域 textarea
复选框 input:checkbox
单选框 input:radio
下拉菜单 select
...
→ value
→ checked
→ value
→ value
→ checked
计算属性
概念:
基于
现有的数据
,计算出来的
新属性
。
依赖
的数据变化,
自动
重新计算
。
语法:
① 声明在
computed 配置项
中,一个计算属性对应一个函数
② 使用起来和普通属性一样使用
{{
计算属性名
}}
计算属性 → 可以将一段 求值的代码 进行封装
computed 计算属性 vs methods 方法
computed 计算属性:
作用:
封装了一段对于
数据
的处理,求得一个
结果
。
语法:
① 写在
computed
配置项中
② 作为属性,直接使用 →
this.计算属性
{{
计算属性
}}
methods 方法:
作用:
给实例提供一个
方法
,调用以处理
业务逻辑
。
语法:
① 写在
methods
配置项中
② 作为方法,需要调用 →
this.方法名( )
{{
方法名
()
}} @
事件名
="
方法名
"
缓存特性
(提升性能)
:
计算属性会对
计算出来的
结果缓存
,再次使用直接读取缓存,
依赖项变化了,会
自动
重新计算 → 并
再次缓存
计算属性完整写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles/index.css" />
<title>Document</title>
</head>
<body>
<div id="app" class="score-case">
<div class="table">
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody v-if="list.length > 0">
<tr v-for="(item, index) in list" :key="item.id">
<td>{{ index + 1 }}</td>
<td>{{ item.subject }}</td>
<!-- 需求:不及格的标红, < 60 分, 加上 red 类 -->
<td :class="{ red: item.score < 60 }">{{ item.score }}</td>
<td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td colspan="5">
<span class="none">暂无数据</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<span>总分:{{ totalScore }}</span>
<span style="margin-left: 50px">平均分:{{ averageScore }}</span>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="form">
<div class="form-item">
<div class="label">科目:</div>
<div class="input">
<input
type="text"
placeholder="请输入科目"
v-model.trim="subject"
/>
</div>
</div>
<div class="form-item">
<div class="label">分数:</div>
<div class="input">
<input
type="text"
placeholder="请输入分数"
v-model.number="score"
/>
</div>
</div>
<div class="form-item">
<div class="label"></div>
<div class="input">
<button @click="add" class="submit" >添加</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
list: [
{ id: 1, subject: '语文', score: 62 },
{ id: 7, subject: '数学', score: 89 },
{ id: 12, subject: '英语', score: 70 },
],
subject: '',
score: ''
},
computed: {
totalScore() {
return this.list.reduce((sum, item) => sum + item.score, 0)
},
averageScore () {
if (this.list.length === 0) {
return 0
}
return (this.totalScore / this.list.length).toFixed(2)
}
},
methods: {
del (id) {
// console.log(id)
this.list = this.list.filter(item => item.id !== id)
},
add () {
if (!this.subject) {
alert('请输入科目')
return
}
if (typeof this.score !== 'number') {
alert('请输入正确的成绩')
return
}
this.list.unshift({
id: +new Date(),
subject: this.subject,
score: this.score
})
this.subject = ''
this.score = ''
}
}
})
</script>
</body>
</html>
业务技术点总结:
1. 渲染功能(不及格高亮)
v-if v-else
v-for
v-bind:class
2. 删除功能
点击传参 filter过滤覆盖原数组
.prevent
阻止默认行为
3. 添加功能
v-model
v-model修饰符(.trim .number)
unshift
修改数组更新视图
4. 统计总分,求平均分
计算属性
reduce求和