2021-7-7 VUE笔记2

if实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <div v-if="score>=90">还行</div>
   <div v-else-if="score>=80">一般般</div>
   <div v-else-if="score>=60">就这</div>
   <div v-else="score>=0">累了</div>
   <div v-show="disp">我去</div>
   <button @click="handle">new</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
   score:50,
   disp:false
  },
  methods:{
    handle:function(event){
    this.disp=!this.disp;
    }
  }
})
</script>
</body>
</html>
View Code

 v-if和v-show的区别时v-if控制是否渲染，而v-show控制display：none

posted @ 2021-07-07 17:01  月长生  阅读(21)  评论(0)    收藏  举报