版权声明：本文为博主原创学习笔记，如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85224963
v-for渲染
v-for是Vue中常用的列表渲染方法， 可以将一个列表渲染为一系列的HTML元素，也可以用来遍历对象内的k-v对。另外关于模板元素渲染在官方文档上见这里。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<h4>遍历字符串数组:</h4>
<ul>
<li v-for="c in characters">{{c}}</li>
</ul>
<h4>遍历对象数组:</h4>
<ul>
<li v-for="u in users">{{u.name}},{{u.age}}</li>
</ul>
<h4>带下标的遍历:</h4>
<ul>
<li v-for="(c,i) in characters">{{c}}的下标是{{i}}</li>
</ul>
<h4>不放在列表里,而是放在div里(一下生成多个格式一样的div很方便):</h4>
<div v-for="(u,i) in users" style="border: 1px solid">
<p>{{i}} . {{u.name}}</p>
<p>{{u.age}}</p>
</div>
<h4>有时不需要那么多div,只是要做多元素渲染,在template上使用v-for:</h4>
<template v-for="(u,i) in users">
<p>{{i}} . {{u.name}}</p>
<p>{{u.age}}</p>
</template>
<h4>遍历对象(相当于遍历一个字典):</h4>
<template v-for="(u,i) in users">
<p>现在是第{{i+1}}个对象</p>
<div v-for="(v,k) in u">{{k}}={{v}}</div>
</template>
</div>
<script src="app8.js"></script>
</body>
</html>
app8.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
// 要遍历的两个数组
characters: ["Tom", "Flora", "John"],
users:[
{name:"lzh1",age:21},
{name:"lzh2",age:22},
{name:"lzh3",age:23}
]
}
});
运行结果
Vue的小Demo
本来教学视频里是沙袋，不过找不到素材，就用一folder的素材代替了。
这个Demo就是不断点击一个按钮，然后减少一个耐久度值，并通过动态绑定css在一个进度条上显示出来，当减少到0时把那个按钮隐藏掉，同时把图片更换成被打破的folder。点击重新开始就会还原这些值。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style3.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--这个vue-app是根容器-->
<div id="vue-app">
<!--图片-->
<!--用动态绑定css样式来实现图片的更换-->
<div id="folder" v-bind:class="{burst:ended}"></div>
<!--进度情况-->
<div id="progress-bar">
<!--用数据别绑定,将耐久度绑定到这个div的样式上并构成百分比-->
<div v-bind:style="{width:health+'%'}"></div>
</div>
<!--控制按钮-->
<div id="controls">
<!--用v-on控制点击时触发的方法,用v-show控制敲击按钮何时不展示-->
<button v-on:click="punch()" v-show="!ended">敲击</button>
<button v-on:click="restart()">重新开始</button>
</div>
</div>
<script src="app9.js"></script>
</body>
</html>
app9.js
// 实例化vue对象
new Vue({
el: "#vue-app",
data: {
health: 100,//100-进度条的进度,即folder的耐久度..
ended: false //folder是否已经被打破
},
methods: {
//点击"敲击"
punch: function () {
this.health -= 10;
if (this.health <= 0) {
this.ended = true;
}
},
//点击"重新开始"
restart: function () {
this.health = 100;
this.ended = false;
}
}
});
style3.css
#folder {
width: 400px;
height: 500px;
margin: 0 auto;
background: url("./img/folder.png") center no-repeat;
/*图片占容器80%*/
background-size: 80%;
}
/*动态绑定的css样式,当ended为true时这里的样式将生效*/
#folder.burst{
background-image: url("./img/folder_broken.png");
}
#progress-bar{
width:200px;
border: 2px black solid;
margin: 0 auto 20px auto;
}
#progress-bar div{
height: 20px;
background-color: crimson;
}
#controls{
width: 160px;
margin: 0 auto;
}
#controls button{
margin-left: 20px;
}
运行结果
