vue 第六天 （条件判断）
1、v-if 表达式
如果v-if里面的相等的话就执行表达式里面的
<!-- v-if 表达式-->
<div id="vue_one">
如果我是dj你还爱我吗
<h1 v-if="dj=='爱你'">爱你</h1>
<h1 v-if="dj=='不爱你'">不爱你</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data:{
dj:'爱你',
},
methods: {
}
})
</script>
2、v-else-if 表达式
如果 v-if 里面的不相等的话就执行下一句话 v-else-if
<!-- v-else-if 表达式-->
<div id="vue_one">
如果我是dj你还爱我吗
<h1 v-if="dj=='爱你'">爱你</h1>
<h1 v-else-if="dj=='不爱你'">不爱你</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data:{
dj:'爱你',
},
methods: {
}
})
</script>
3、v-else 表达式
如果 v-if 里面的不相等的话，就执行 v-else里面的
<!-- v-else 表达式-->
<div id="vue_one">
如果我是dj你还爱我吗
<h1 v-if="dj=='爱你'">爱你</h1>
<h1 v-else="dj=='不爱你'">不爱你</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data:{
dj:'不爱你',
},
methods: {
}
})
</script>
4、v-if v-else-if v-else 表达式
<!-- v-if v-else-if v-else 表达式-->
<div id="vue_one">
<h1 v-if="score <= 60">你的成绩为C</h1>
<h1 v-else-if="score <= 70">你的成绩为B</h1>
<h1 v-else-if="score <= 80">你的成绩为A</h1>
<h1 v-else="">你的成绩为S</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data:{
score:130,
},
methods: {
}
})
</script>
5、v-show 表达式
v-show 相当于 style 样式中的 display:none 属性
<!-- v-show 表达式-->
<div id="vue_one">
<h1 v-show="xs">我为true时候显示，否则我是隐藏的none</h1>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#vue_one',
data:{
xs:true,
},
methods: {
}
})
</script>
花开一千年,花落一千年,花叶永不见