理论知识
- 相同点
- 都用在vue模板中，用于控制元素是否向用户显示。
- 其值都是boolean类型的表达式
- 不同点
- v-if类似if语句，可以接连多个v-if-else语句，控制多个dom节点。v-show只控制一个dom节点。
- v-if控制的元素不显示时，则不会渲染到页面，即在f12下的elements下无该元素。 v-show即使不显示，也会渲染到页面，即在调试页面的elements中可以看到。
实践
<body>
<div id="app">
<div v-if='a>100'>优秀</div>
<div v-else-if='a >=80 && a<=100'>良好</div>
<div v-else='a<70'>差</div>
<div v-show='s'>测试v-show</div>
<div>{{ a =>80 }}</div>
</div>
<script type="text/javascript">
Vue.config.keyCodes.aaa= 65
var app = new Vue({
el: '#app',
data:{
s:false,
a:60,
}
})
- 在写判断语句时，大于等于和小于等于中，等号始终在后面，即 '>='和'<='。而 '=>'是箭头函数。