Vue小案例（一）
目录
案例一：点击按钮切换图片
案例二：书架
案例三：成绩表
案例一：点击按钮切换图片
现在有5张图片，我想通过点击上一张 / 下一张的按钮来进行图片切换。
使用：v-bind、v-on、v-show
1、首先创建好Vue代码格式：
Document
有5张图片，需要将其放入数组里，在data中创建数组和下标：
创建2个按钮，上一张和下一张，以及相应的v-on事件：
中间还有图片的显示，需要v-bind动态设置img标签属性：
![]()
效果：
点击按钮上下翻动图片就完成了，但是还有一个BUG。
当上一张到第1张位置时，再点上一张会出错，同样的下一张也是。
解决方式：用v-if 进行条件渲染（或者用v-show)
![]()
这样到达第一张时“上一张”按钮就不会显示了，同理下一张处也是一样。
完整代码：
Document
![]()
案例二：书架
现在需要设计这么一个书架，并能够删除其中的书。
使用：
首先是用v-for循环渲染数组：
-
{{ item.name }}
{{ item.author}}
效果：
接下来实现删除功能。
首先还是用v-on注册事件，在button上设置点击事件，并且在data下方提供相应的methods：
删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。
上面传参传item.id，有id用id，不用数组下标。
下方方法体中用filter进行过滤：
-
{{ item.name }}
{{ item.author }}
案例三：成绩表
创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。
1、首先，把基础框架搭建好，填入基础数据：
Document
2、table中有2个tbody，分别对应有无数据的情况。那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。
只需这样，就可以同时只出现一个tbody了：
3、渲染列表，用v-for实现，代码会变得简洁很多且容易控制：
{{ index+1 }}
{{ item.subject }}
{{ item.score }}
删除
4、实现删除功能。用v-on注册点击事件，简写成@click，创建methods方法实现：
5、添加功能，需要先处理表单数据的双向绑定，这样才能拿到数据，用v-model：
v-model.trim可以自动消除输入前后的空白，.number是将输入的字符串转成数字！
然后是注册点击事件，add方法添加数据，unshift是数据加到最前面：
严谨起见，还得判断输入的内容是否合规，并且在输入完后使得页面上的数据清除：
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 = ""
}
}6、计算总分、平均分。需要用到computed方法：
.toFixed(2)是保留两位小数的意思。
注意：当删除元素删完后，平均分会显示NAN，因为除法除数为0.
这里可以加一个判断：
完整代码：
Document
编号
科目
成绩
操作
{{ index+1 }}
{{ item.subject }}
{{ item.score }}
删除
暂无数据
总分:{{ totalScore }}
平均分:{{ aveScore }}
科目:
分数: