标签：优秀 初始 点击 htm document lse lan 组件 lang
v-if、v-else、v-else-if以及v-show的用法
v-if的渲染方式：
v-show高；v-show的渲染方式：
v-show的初始渲染开销比v-if高；如果需要频繁的切换，则使用
v-show；如果运行时条件很少改变，则用
v-if；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if=‘score>=90‘>优秀</div>
<div v-else-if=‘score<90&&score>=80‘>良好</div>
<div v-else-if=‘score<80&&score>60‘>一般</div>
<div v-else>比较差</div>
<div v-show=‘flag‘>测试v-show</div>
<button v-on:click=‘handle‘>点击</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
分支结构
v-show的原理：控制元素样式是否显示 display:none
*/
var vm = new Vue({
el: ‘#app‘,
data: {
score: 80,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
标签：优秀 初始 点击 htm document lse lan 组件 lang
原文地址：https://www.cnblogs.com/apebro/p/12602352.html
