v-if的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="isflag">{{message}}</h1>
<button @click="change">按钮</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "sb",
isflag: true
},
methods: {
change(){
this.isflag = !this.isflag;
}
},
})
</script>
</body>
</html>v-if和v-else的结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 无用 -->
<!-- <h1 v-if="isflag">{{message}}</h1>
<button @click="change">按钮</button>
<h1 v-else>当为false时我出现了</h1> -->
<h1 v-if="isflag">{{message}}</h1>
<h1 v-else>当为false时我出现了</h1>
<button @click="change">按钮</button>
<!-- 无用 -->
<!-- <h1 v-else>当为false时我出现了</h1>
<button @click="change">按钮</button> -->
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hhh我来了",
isflag: true
},
methods: {
change(){
this.isflag = !this.isflag;
}
},
})
</script>
</body>
</html>v-if和v-else-if和v-else的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-if="data>=90">优</h1>
<h1 v-else-if="data>=80">良</h1>
<h1 v-else-if="data>=70">中</h1>
<h1 v-else-if="data>=60">及格</h1>
<h1 v-else>不及格</h1>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
data: 90
}
})
</script>
</body>
</html>