网页设计图片切换代码 第1篇
创建图示这么个成绩表，包含三个科目及其编号成绩，显示总分和平均分，并可以进行添加成绩和删除成绩的操作(删除所有数据后显示暂无数据)。
1、首先，把基础框架搭建好，填入基础数据：
2、table中有2个tbody，分别对应有无数据的情况。那么就需要v-if 来进行条件渲染，注意这里不用v-show，因为v-show只是控制元素的显示隐藏，而不会真正控制元素节点的创建删除。
只需这样，就可以同时只出现一个tbody了：
3、渲染列表，用v-for实现，代码会变得简洁很多且容易控制：
5、添加功能，需要先处理表单数据的双向绑定，这样才能拿到数据，用v-model：
可以自动消除输入前后的空白，.number是将输入的字符串转成数字！
网页设计图片切换代码 第2篇
可以看到，方法二比方法一所用JS代码要少。
接着上边的进行修改，我们可以来看看方法三：
三种方式，都可以实现图片切换效果（第一种如果图片数目多，要展示的图片也不一样多的话不推荐使用），图片切换效果如下：
我还有篇博客也是进行图片切换效果的，所用方式与此三种有些区别，可以进行参考，就先不进行合并了：JavaScript实现淘宝商品图切换效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
网页设计图片切换代码 第3篇
现在需要设计这么一个书架，并能够删除其中的书。
使用：
首先是用v-for循环渲染数组：
效果：
接下来实现删除功能。
删除就是将bookList对应的数组元素删除，那么del方法需要接收参数来确定删除哪一项。
上面传参传，有id用id，不用数组下标。
下方方法体中用filter进行过滤：