之前练习的一个小练习,vue.js
代码:
<div class="app">
<!-- v-if后面一般跟的是boolean值 true就显示。false就不显示-->
<h2 v-if="isShow">
<div>123</div>
{{message}}
</h2>
<!-- 直接在浏览器把isShow改为false就会显示 -->
<h3 v-else>当isShow为false时,显示我</h3>
<!---v-if和v-else和v-else-if的结合使用,刺激判断------------------- -->
<!-- <h1 v-if="score>=90">优秀</h1> -->
<!-- 这里不需要写·&&score<90,因为它是elseif,是上面条件不满足时才执行 -->
<!-- <h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2> -->
<h1>---------------------------------</h1>
<h2>{{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '.app',
data: {
message:'你好',
isShow: true,
score:100
},
computed: {
result(){
let showMessage = '';
if(this.score >= 90){
showMessage = '优秀'
}else if(this.score >=80){
showMessage = '良好'
}else if(this.score >=70){
showMessage = '及格'
}else{
showMessage = '再练练,不及格'
}
return showMessage
}
},
methods: {
},
})
</script>
当我们在浏览器控制台把,把isShow改为false,