一、分支结构
- v-if
- v-else
- v-else-if
- v-show
v-if与v-show的区别
- v-if控制元素是否渲染到页面
- v-show控制元素是否显示（已经渲染到了页面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<div>
<input v-model="scope" type="text" width="200px" height="30px" placeholder="请输入您的成绩" aria-label="成绩"/>
<div v-if="this.scope > 0 && this.scope < 60">成绩不及格</div>
<div v-else-if="this.scope >= 60 && this.scope < 90">成绩及格</div>
<div v-else-if="this.scope >= 90 && this.scope <= 100">成绩优秀</div>
<div v-else>成绩不合法</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
scope: 0
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<div>
<input v-model="scope" type="text" width="200px" height="30px" placeholder="请输入您的成绩" aria-label="成绩"/>
<div v-show="this.sign">
<div v-if="this.scope > 0 && this.scope < 60">成绩不及格</div>
<div v-else-if="this.scope >= 60 && this.scope < 90">成绩及格</div>
<div v-else-if="this.scope >= 90 && this.scope <= 100">成绩优秀</div>
<div v-else>成绩不合法</div>
</div>
<button @click="this.handler">是否显示成绩状况</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
scope: 0,
sign: true
},
methods: {
handler: function () {
this.sign = !this.sign
}
}
})
</script>
</body>
</html>
二、循环结构
v-for遍历数组
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '自定义间隔符' + {{index}}</li>
key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '自定义间隔符' {{index}}</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<div>
<div>班级成员</div>
<ul>
<li v-for="stu in this.students">{{stu}}</li>
</ul>
<div>班级成员</div>
<ul>
<li v-for="(stu, index) in this.students">{{index + ': ' + stu}}</li>
</ul>
<div>班级成员</div>
<ul>
<li v-bind:key="stu.id" v-for="(stu, index) in this.students">{{index + ': ' + stu}}</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
students: ['小明', '小李', '小丽', '小王', '小张', '班主任']
},
methods: {
handler: function () {
}
}
})
</script>
</body>
</html>
v-for遍历对象
<div v-for='(value, key, index) in object'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<div>
<!--方法一-->
<div>班级成员</div>
<ul>
<!--绑定的key是由用户自己指定的，用户需要将唯一标识符定义为key-->
<li v-bind:key="stu.id" v-for="stu in this.students">
<span>{{stu.name}}</span>
<span>{{stu.age}}</span>
</li>
</ul>
<!--方法二-->
<div>班级成员</div>
<ul>
<li v-for="(value, index) in this.students">
{{value}}
{{key}}
{{index}}
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
students: [
{name: '小明', age: 16},
{name: '小李', age: 20},
{name: '小丽', age: 18},
{name: '小王', age: 16},
{name: '小张', age: 21},
{name: '班主任', age: 17}
]
},
methods: {
handler: function () {
}
}
})
</script>
</body>
</html>
<script>
import Index from "@/components/HelloWorld";
export default {
components: {Index}
}
</script>
v-if和v-for结合使用
<div v-if='判断表达式' v-for='(value, key, index) in object'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是我的第一个vue页面</title>
</head>
<style type="text/css">
</style>
<body>
<div id="test">
<div>
<!--方法一-->
<div>班级成员</div>
<ul>
<li v-bind:key="stu.id" v-for="stu in this.students">
<span>{{stu.name}}</span>
<span>{{stu.age}}</span>
</li>
</ul>
<!--方法二-->
<div>班级成员</div>
<ul>
<!--只将大于20岁的成员显示出来-->
<li v-if="value.age > 20" v-for="(value, index) in this.students">
{{value}}
{{key}}
{{index}}
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#test',
data: {
students: [
{name: '小明', age: 16},
{name: '小李', age: 20},
{name: '小丽', age: 18},
{name: '小王', age: 16},
{name: '小张', age: 21},
{name: '班主任', age: 17}
]
},
methods: {
handler: function () {
}
}
})
</script>
</body>
</html>
<script>
import Index from "@/components/HelloWorld";
export default {
components: {Index}
}
</script>