<body>
<div id="app">
<h2 v-if="isShow">{{message}}</h2>
<h1 v-else>world</h1>
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
isShow: true
}
})
</script>
</body>
<div id="app">
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99
}
})
</script>
<div id="app">
<h2>{{result}}</h2>
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
score: 99
},
computed: {
result(){
let show = '';
if(this.score >= 90){
show = "优秀"
}else if(this.score >= 80){
show = "良"
}else if(this.score >= 60){
show = "及格"
}else{
show = "不及格"
}
return show;
}
}
})
</script>
<div id="app">
<span v-if="ifUser">
<label for="username">用户名</label>
<input type="text" id="username" placeholder="用户名">
</span>
<span v-else>
<label for="email">用户邮箱</label>
<input type="text" id="email" placeholder="用户邮箱">
</span>
<button @click="bclick">切换类型</button>
</div>
<script src="js/vue.js">
</script>
<script>
const app = new Vue({
el: '#app',
data: {
ifUser: true
},
methods: {
bclick(){
this.ifUser = !this.ifUser;
}
}
})
</script>