一、实验原理
1.条件渲染：v-if指令、v-else指令、v-else-if指令、v-show指令
在前端程序设计中，经常需要控制某些 DOM 元素的显示或隐藏，为此 Vue.js提供了多个指令来实现条件渲染。
在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。
Vue提供了下面的指令来进行条件判断：
v-if
v-else
v-else-if
v-show
2.循环渲染：v-for指令，遍历数组，数组更新检测，遍历对象
循环渲染又叫列表渲染。通过循环渲染，可以将数组或对象中的数据进行循环遍历并渲染到DOM中。在Vue.js中，实现循环渲染的指令是v-for指令。
vue条件渲染指令包括v-if、v-else、v-else-if、v-show。v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回真值时才被渲染；v-show根据一个条件决定是否显示元素或者组件，依赖于控制display属性。
二、实验源代码
使用条件渲染指令（v-if、v-show）指令实现图片的隐藏和显示控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切换图片的显示和隐藏</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="button" :value="bText" v-on:click="toggle ">
<div v-show="show">
<img src="./img/img.jpg">
</div>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '#box',
data: {
bText: '隐藏图片',
show: true
},
methods: {
toggle: function() {
this.bText == '隐藏图片' ? this.bText = '显示图片' : this.bText = '隐藏图片';
this.show = !this.show;
}
}
})
</script>
</body>
</html>
使用循环渲染指令，实现电影票房排序功能
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环渲染中数组排序反转</title>
<script src="./js/vue.js"></script>
</head>
<style>
.title {
color: red;
}
</style>
<body>
<div id="app">
<table border="1">
<tr>
<td>电影名称</td>
<td>电影票房（单位：亿</td>
</tr>
<tr v-for="(items,index) in movies">
<td>{{items.name}}</td>
<td>{{items.pf}}</td>
</tr>
</table>
<input type="button" value="按票房进行排序" @click="sortMovie">
<input type="button" value="反转" @click="reverseMovie">
</div>
<script>
new Vue({
el: '#app',
data: {
movies: [{
name: "电影1",
pf: 90
}, {
name: "电影2",
pf: 80
}, {
name: "电影3",
pf: 100
}, ]
},
methods: {
sortMovie: function() {
this.movies.sort(function(a, b) {
var x = a.pf;
var y = b.pf;
return (x > y) ? -1 : 1;
})
},
reverseMovie: function() {
this.movies.reverse();
}
}
})
</script>
</body>
</html>