十三.Vue列表渲染
十三.Vue列表渲染
强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码
一.Vue初体验：https://blog.csdn.net/qq_43674132/article/details/104857216 二.Vue条件命令：https://blog.csdn.net/qq_43674132/article/details/104857322 三.Vue循环指令：https://blog.csdn.net/qq_43674132/article/details/104857517 四.Vue处理用户输入：https://blog.csdn.net/qq_43674132/article/details/104857651 五.Vue组件初体验：https://blog.csdn.net/qq_43674132/article/details/104857870 六.Vue实例：https://blog.csdn.net/qq_43674132/article/details/104857953 七.Vue模板语法：https://blog.csdn.net/qq_43674132/article/details/104858009 八.Vue计算属性：https://blog.csdn.net/qq_43674132/article/details/104858068 九.Vue.js侦听器：https://blog.csdn.net/qq_43674132/article/details/104860083 十.Vue.js的class绑定：https://blog.csdn.net/qq_43674132/article/details/104861826 十一.Vue style绑定：https://blog.csdn.net/qq_43674132/article/details/104877107 十二.Vue 条件渲染：https://blog.csdn.net/qq_43674132/article/details/104877177 十三.Vue 列表渲染：https://blog.csdn.net/qq_43674132/article/details/104877393 十四.Vue事件处理：https://blog.csdn.net/qq_43674132/article/details/104878173 十五.Vue表单输入绑定：https://blog.csdn.net/qq_43674132/article/details/104879776 十六.Vue中引用图片：https://blog.csdn.net/qq_43674132/article/details/107043105
使用v-for遍历数组对象
我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用book in books形式的特殊语法，其中 books 是源数据数组，而 book 则是被迭代的数组元素的别名。具体操作如下代码
data:{
books:[
{
name:"三国演义",
author:"罗贯中"
},
{
name:"西游记",
author:"吴承恩"
},
{
name:"水浒传",
author:"施耐庵"
},
{
name:"红楼梦",
author:"曹雪芹"
}
]
}<table border="1">
<!--第一行-->
<tr>
<td>循环下标</td>
<td>书名</td>
<td>作者</td>
</tr>
<!--books:要遍历的数组元素 book：每一个要遍历元素的别名，book想当于是book里面的每一个对象-->
<!--除了book，还可以加一个下标:index in也可以改成of-->
<!--v-for既可以遍历数组对象，也可以遍历普通对象-->
<tr v-for="(book,index) in books" v-bind:key="index">
<td>{
{index}}</td>
<td>{
{book.name}}</td>
<td>{
{book.author}}</td>
</tr>
</table>循环数组对象浏览器显示如下
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
<tr v-for="(book,index) in books" v-bind:key="index">
<td>{
{index}}</td>
<td>{
{book.name}}</td>
<td>{
{book.author}}</td>
</tr>使用v-for遍历单个对象
data:{
site:{
url:"https://lqgjava.github.io/",
name:"凌枫博客",
server:"github"
}
}<div v-for="(s,p,index) in site" v-bind:key="index">{
{s}}--{
{p}}--{
{index}}</div>单个对象遍历浏览器显示如下
你也可以提供第二个的参数为 property 名称 (也就是键名)：下面代码的p就是键名
<div v-for="(s,p,index) in site" v-bind:key="index">{
{s}}--{
{p}}--{
{index}}</div>数组更新检测
变异方法
Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()pop()shift()unshift()splice()sort()reverse()
你可以打开控制台，然后对前面例子的 books 数组尝试调用变异方法。比如 app.books.push({name:"斗破苍穹",author:"天蚕土豆"})。
详细代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue的条件渲染</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<!--第一行-->
<tr>
<td>循环下标</td>
<td>书名</td>
<td>作者</td>
</tr>
<!--books:要遍历的数组元素 book：每一个要遍历元素的别名，book想当于是book里面的每一个对象-->
<!--除了book，还可以加一个下标:index in也可以改成of-->
<!--v-for既可以遍历数组对象，也可以遍历普通对象-->
<tr v-for="(book,index) in books" v-bind:key="index">
<td>{
{index}}</td>
<td>{
{book.name}}</td>
<td>{
{book.author}}</td>
</tr>
</table>
<hr>
<!--也可以拿到属性的key-->
<!--遍历普通对象-->
<div v-for="(s,p,index) in site" v-bind:key="index">{
{s}}--{
{p}}--{
{index}}</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
books:[
{
name:"三国演义",
author:"罗贯中"
},
{
name:"西游记",
author:"吴承恩"
},
{
name:"水浒传",
author:"施耐庵"
},
{
name:"红楼梦",
author:"曹雪芹"
}
],
site:{
url:"https://lqgjava.github.io/",
name:"凌枫博客",
server:"github"
}
}
});
</script>
</body>
</html>腾讯云开发者
