当前位置：首页 > news >正文

Vue2教程003：Vue指令之v-bind和v-for

news 2025/6/23 22:17:41

文章目录

- 2.6 v-bind
- 2.7 图片轮播案例
- 2.8 v-for
- 2.9 图书管理案例

2.6 v-bind

作用：动态设置html的标签属性->src、url、title…
语法：v-bind:属性名="表达式"

动态设置img标签的src属性：

<body>
<div id="app"><img class="image" v-bind:src="imgUrl" alt="图片" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {imgUrl: './images/02.jpg'},methods:{}})
</script>
</body>

注意：v-bind:src可以简写为:src，即v-bind可以省略。

2.7 图片轮播案例

核心思路分析：

数组存储图片路径->[图片1, 图片2, 图片3, ...]
准备下标index，数组[下标] -> v-bind设置src展示图片 -> 修改下标切换图片

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><button v-show="index>0" @click="index--">上一页</button><div class="box"><img class="image" :src="list[index]" alt=""/></div><button v-show="index<list.length-1" @click="index++">下一页</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {index: 0,list: ['./images/01.jpg','./images/02.jpg','./images/03.jpg','./images/04.jpg',]},methods: {}})
</script></body>
<style>.box {border: 1px solid gray;width: 320px;}.image {width: 300px;margin: 10px;}
</style>
</html>

运行效果：

在这里插入图片描述

涉及的知识点：

v-show
点击事件
数组

2.8 v-for

作用：基于数据循环，多次渲染整个元素。

适用类型：数组、对象、数字。

遍历数组语法：v-for="(item, index) in 数组"，item每一项，index下标

代码示例：

<body>
<div id="app"><h3>NBA-太阳队</h3><ul><li v-for="(item, index) in list">{{ item }} -- {{ index }}</li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {list: ['Durant', 'Book', 'Beal']},methods: {}})
</script>
</body>

运行效果：

在这里插入图片描述

2.9 图书管理案例

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h3>我的书籍</h3><el-table:data="bookList"stripeborderstyle="width: 50%"><el-table-columnprop="id"label="书架号"width="180"></el-table-column><el-table-columnprop="name"label="书籍名称"width="180"></el-table-column><el-table-columnprop="author"label="作者"></el-table-column><el-table-columnwidth="100"label="操作"><template slot-scope="scope"><el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button></template></el-table-column></el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>const app = new Vue({el: '#app',data: {bookList: [{id: 1,name: '《长安的荔枝》',author: '马伯庸'},{id: 2,name: '《明朝那些事儿》',author: '当年明月'},{id: 3,name: '《平凡的世界》',author: '路遥'}]},methods: {del(id) {// filter：根据条件，保留满足条件的对应项// filter：不会改变原来的数组，而是得到一个新的数组this.bookList = this.bookList.filter(item => item.id !== id);}}})
</script>
</body>
</html>

运行效果：

在这里插入图片描述

注意：

filter的使用。
根据条件，保留满足条件的对应项。
不会改变原来的数组，而是得到一个新的数组

html网页中element-ui前端组件的使用。
引入样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

引入组件库
`<script src="https://unpkg.co