文章目录
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"
stripe
border
style="width: 50%">
<el-table-column
prop="id"
label="书架号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="书籍名称"
width="180">
</el-table-column>
<el-table-column
prop="author"
label="作者">
</el-table-column>
<el-table-column
width="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>
运行效果：
标签：index,Vue,bind,app,003,item,数组,id From： https://blog.csdn.net/WwLK123/article/details/144042689注意：
- filter的使用。
- 根据条件，保留满足条件的对应项。
- 不会改变原来的数组，而是得到一个新的数组
html网页中element-ui前端组件的使用。
- 引入样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">- 引入组件库
- `<script src="https://unpkg.co