vue.js 教程(三)必学的if else!v-show

上一篇我们学到了real time即时更新页面的方法,在学习任何一种程式语言时,基本上都会有一些必学的东西,比方说变数、参数、if else 、 for loop 、 for each 、 while与一些运算子(加、减、乘、除、and、or等等),这些都是一定会学到的东西。一旦你真的搞懂,即便换了一套程式语言,你也会发现这些部分都很似曾相识。所以这篇我们要来讲的就是if else!

来介绍一下这一篇你会学到的三个html 扩充属性:

  1.  v-show :这是Vue.js特有的写法,基本上就是等于v-if,所以属性值就是所谓的运算条件了。
  2.  v-if :同v-show,唯一差别是v-show只是用css dispaly:none来隐藏,但v-if是真的会移除
  3.  v-else : 这是当v-show或v-if条件不成立时需要选择的答案

看完上面三点如果你觉得你完全没看懂,千万不要紧张,也不要觉得困难,就把它当专有名词就好,就像橘子为什么叫橘子,柳丁为什么叫柳丁一样,就只是一个名词而已,不要为了看不懂这些名词就停下来。现在我们来举个实际范例来实现if else功能! 

不知道到目前为止大家觉得Vue.js好不好学?如果要打个分数,1~10分你会打几分?我们假设6分才及格,所以当你打6分以上,画面会出现Vue.js so easy,如果不到6分,画面上就会出现still learning Vue.js。

好了!题目出来了,稍微思考一下大概要怎么做吧!在程式开发的过程中,其实最难的部分是思考,思考如何把程式写出来,还要考量架构、效能等等,这才是我觉得最难的地方。所幸题目是我出的,所以很简单,你有想好一个大概了吗?让我们继续看下去。

第一步当然是运用上一篇所学,先建立一个可以即时打分数的页面,程式码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 v-show</title>
</head>
<body>

<div id="app">
<h1 class="error">{{ score }}分</h1>
<p>你覺得vue.js簡單嗎?請輸入1~10分</p>
<input type="text" v-model="score">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',

data:{
score:''
}            });
</script>
</body>
</html>

好了!如果你执行上面的code,你会发现你已经完成一个简单、可以即时显示分数的页面,只是第一行很奇怪,会一直挂个分在那边,如果你输入了1,它就变成1分,那就合理了,所以你可以带入score的预设值是0,这样就会显示0分,看起来就会合理多了!

第二步就是,如果score分数超过6分就要显示“Vue.js so easy”,但不足6分就要显示“still learning Vue.js”,这部分要怎么写呢?那当然就要用到v-show与v-else了,以下就是范例程式码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2 v-show</title>
</head>
<body>

<div id="app">
<h1 class="error">{{ score }}分</h1>
<div v-show="score">
<p v-if="score >= 6">Vue.js so easy</p>
<p v-else>still learning Vue.js</p>
</div>
<p>你覺得vue.js簡單嗎?請輸入1~10分</p>
<input type="text" v-model="score">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
score:'0'
}
});
</script>
</body>
</html>

上面的范例程式码,我加上了score预设值是0,然后当score是有值的,就会根据目前输入的分数去做判断,判断内容就是大于等于6分以上就会显示“Vue. js so easy”,不足6分就会显示“still learning Vue.js”,当然你也可以把条件是改成大于5分,结果会是一样的,当然你把所有的v-show都改成v -if,结果还是会一样的。当然我们也把我们最后的code上放jsfiddle

当然这个题目还可以继续延伸下去,比方说当输入文字超过10时会出现警告讯息,而当score的参数值不存在时也会显示不一样的文字,各位可以自行增加一些条件来做延伸练习。 

另外,值得一提的是在Vue 2.1版本加入了另外一个html属性,也是属于if else家族的,那就是“v-else-if”,用法其实跟else差不多,所以当你有很多else的时候,除了最后一个可以写v-else以外,从倒数第二个以上的else都可以写成v-else-if,各位也可以自行试试看喔!

Author: bwh

发表评论