前言
在眾多的編程語言中，我們的基礎語法總是少不了一些專業語法，比如像定義變量，條件語句，for循環，數組，函數等等，vue.js這個優秀的前端框架中也有同樣的語法，我們換一個名詞，將條件語句改成專業詞彙叫做條件渲染，循環語句改成專業詞彙叫做列表渲染，這樣比較舒服一點。
本章目標
-
學會條件渲染的使用
-
學會可復用的key的使用
-
學會列表渲染的使用
條件渲染
1.v-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app01">
<span v-if="type==='A'">成績為A</span>
</div>
<script src="../js/vue.js"></script>
<script>
let vm=new Vue({
el:'#app01',
data:{
type:'A'
},
methods:{
},
watch:{
},
computed:{
}
})
</script>
</body>
</html>
結果：成績為A
v-if判斷條件是否相等，就像if一樣，如果相等，那麼值就會true,與之對應的還有v-else,v-else-if
2.v-else的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app01">
<span v-if="type==='A'">成績為A</span>
<span v-else>成績為B</span>
</div>
<script src="../js/vue.js"></script>
<script>
let vm=new Vue({
el:'#app01',
data:{
type:'B'
},
methods:{
},
watch:{
},
computed:{
}
})
</script>
</body>
</html>
結果:成績為B
小練習
我們做一個小練習，鞏固一下v-if和v-else的使用，需求如下：點擊一個按鈕時,按鈕上的文字變為显示，再次點擊時按鈕上的文字變為隱藏，當按鈕上的文字显示隱藏時，显示紅色，按鈕上的文字變為显示時显示藍色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="handleClick">{{text}}</button>
<div v-if="show" class="box red"></div>
<div v-else class="blue box"></div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
text:'隱藏'
},
methods:{
handleClick(){
this.show=!this.show;
this.text=this.show?'隱藏':'显示'
}
}
})
</script>
</body>
</html>
結果
3.v-else-if的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app01">
<input type="text" v-model="type"/>
<div v-if="type==='A'">成績為A</div>
<div v-else-if="type==='B'">成績為B</div>
<div v-else-if="type==='C'">成績為C</div>
<div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm=new Vue({
el:'#app01',
data:{
type:''
},
methods:{
},
watch:{
},
computed:{
}
})
</script>
</body>
</html>
結果:
4.v-show
說起這個v-show，其實和v-if有與曲同工的妙處，但是又有不同的地方，我們來看下示例你就秒懂了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-show="show" class="box red"></div>
<button @click="handleClick()">{{text}}</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
text:'隱藏',
},
methods:{
handleClick(){
this.show=!this.show;
this.text=this.show?'隱藏':'显示'
}
},
computed:{
}
})
</script>
</body>
</html>
當按鈕變為显示的時候，背景顏色消失，這裏就不截圖了，有興趣的小夥伴可以自己去嘗試，既然v-if可以幫我們實現元素的显示和隱藏，那我們還需要v-show干什麼呢？不妨看下接下來的實例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-show="show" class="box red"></div>
<div class="box blue" v-if="show"></div>
<button @click="handleClick()">{{text}}</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
text:'隱藏',
},
methods:{
handleClick(){
this.show=!this.show;
this.text=this.show?'隱藏':'显示'
}
},
computed:{
}
})
</script>
</body>
</html>
當我們點擊按鈕的時候
現在結果已經出來了，使用v-show的dom元素，dom元素只是簡單的切換display屬性，而v-if會將dom元素移除，當我們再次點擊時，v-if又會重新渲染元素，可想而知如果頻繁的切換的話，那麼有多麼的耗費性能，因此我總結了如下幾點
-
頻繁的切換显示/隱藏要使用v-show
-
只判斷一次時，使用v-if
5.減少dom的生成
我們都知道js操作dom元素是非常消耗性能的，但是我們需要盡量的避免這個問題，vue中為我們提供了一個template標籤，這個標籤叫做模板(至於什麼叫做模板，後期的博客會講到)，我們先看一個示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-if="show">
<div class="box red"></div>
<div class="box blue"></div>
</div>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
我們想讓圖上的那個div消失，不想為了管理同一組元素而多生成一個節點，這樣是非常消耗性能的，我們將div標籤變成template標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-if="show">
<div class="box red"></div>
<div class="box blue"></div>
</div>
<template v-if="show">
<div class="box red"></div>
<div class="box blue"></div>
</template>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
View Code
現在我有心中萌生了一個想法，v-if可以使用template,那麼v-show是否可以使用呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
}
.red{
background: red;
}
.blue{
background: blue;
}
</style>
</head>
<body>
<div id="app">
<template v-if="show">
<div class="box red"></div>
<div class="box blue"></div>
</template>
<template v-show="show">
<div class="box red"></div>
<div class="box blue"></div>
</template>
<button @click="handleClick()">{{text}}</button>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
show:true,
text:'隱藏',
},
methods:{
handleClick(){
this.show=!this.show;
this.text=this.show?'隱藏':'显示'
}
},
computed:{
}
})
</script>
</body>
</html>
View Code
答案是v-if可以使用template，而v-show不能使用template
vue中用key管理可復用的元素
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換。
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app01">
<template v-if="type==='username'">
<label>用戶名</label>
<input type="text" placeholder="請輸入您的賬號" />
</template>
<template v-else>
<label>郵箱</label>
<input type="text" placeholder="請輸入您的郵箱" />
</template>
<p>
<a href=""@click.prevent="type='username'">用戶名登錄</a>|
<a href=""@click.prevent="type='email'">郵箱登錄</a>
</p>
</div>
<script src="../js/vue.js"></script>
<script>
let vm=new Vue({
el:'#app01',
data:{
isShow:true,
type:'username'
},
methods:{
},
watch:{
},
computed:{
}
})
</script>
</body>
</html>
結果：
當我們在用戶名登錄和郵箱切換的時候，我們發現我們輸入的內容始終保持，為什麼呢?總的來說，因為兩個模板使用了相同的元素，input不會被替換掉——僅僅是替換了它的 placeholder屬性，這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達這兩個元素是完全獨立的,不要復用它們,只需添加一個具有唯一值的key屬性即可。
示例二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app01">
<template v-if="type==='username'">
<label>用戶名:</label>
<input type="text" placeholder="請輸入您的用戶名" key='usename'/>
</template>
<template v-else>
<label>郵箱:</label>
<input type="text" placeholder="請輸入您的郵箱" key='email'/>
</template>
<p>
<a href=""@click.prevent="type='username'">用戶名登錄</a>|
<a href=""@click.prevent="type='email'">郵箱登錄</a>
</p>
</div>
<script src="../js/vue.js"></script>
<script>
let vm=new Vue({
el:'#app01',
data:{
isShow:true,
type:'username'
},
methods:{
},
watch:{
},
computed:{
}
})
</script>
</body>
</html>
結果：
現在我們點擊切換的時候，輸入框都會重新渲染，當然我們的<label>標籤依舊的高效的復用，因為它沒有添加key。
列表渲染
我們用v-for指令根據一組數組的選項列表進行渲染，v-for指令需要以item in items的形式的特殊語法，items是原數據數組並且item是元素迭代的別名
1.v-for的基本使用
語法：(item,index) in|of items
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for的基本使用</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item) in arr">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
arr:['apple','banana','pear']
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
結果：
當然v-for中也可以帶第二個參數index
2.v-for中帶索引
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for的基本使用</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}--{{index}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
arr:['apple','banana','pear']
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
View Code
3.v-for迭代字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for的基本使用</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in arr">{{item}}--{{index}}</li>
</ul>
<ul>
<li v-for="item in 'helloworld'">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
arr:['apple','banana','pear']
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
View Code
4.v-for迭代對象
語法：(value,key,index) of | in items
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for迭代對象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
obj:{
name:'kk',
age:18,
sex:'male'
}
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
結果:
5.v-for迭代整數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for迭代對象</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
</ul>
<ul>
<li v-for="item in 10">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
let vm=new Vue({
el:'#app',
data:{
obj:{
name:'kk',
age:18,
sex:'male'
}
},
methods:{
},
computed:{
}
})
</script>
</body>
</html>
結果：
注意：但我們迭代整數的時候，item從1開始而不是從0開始
總結
在本章內容中，我們一共學習了三個知識點，分別是條件渲染的使用(v-if,v-else,v-else-if),管理可復用的key,列表渲染(v-for的基本使用等等)，本章的內容也多但是在實際應用上非常廣泛，畢竟這些是非常基礎的語法，基礎不牢，地動山搖，學習任何東西都需要自己一步一個腳印走出來。
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線
※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益
※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象
※南投搬家前需注意的眉眉角角，別等搬了再說!
昶洧自有品牌 Thunder Power 電動車系列，於「2015 法蘭克福國際車展(9 月 17 日至 27 日)」中進行首秀。昶洧表示，Thunder Power 電動車系列量產車預計將於 2017 年在歐洲上市，2018 年在中國大陸上市，之後更將進一步拓展美國市場。 Thunder Power 主要生產廠將設在大陸浙江省紹興市，而歐洲的生產基地，待確定後也將公佈。公司指出，目前所有研發活動都將由昶洧設在米蘭附近的歐洲總部開展並管理，而設在中國大陸和美國的研發機構將負責提供額外支持。 昶洧指出，Thunder Power 作為一款後驅電動轎車，擁有令人興奮的駕控性能，和令同儕豔羨的強大續航能力，該系列車型輸出功率有 230 千瓦或 320 千瓦 2 款動力選擇，充滿電後可行駛超過 650 公里，經過 30 分鐘短暫充電，可再行駛 300 多公里，強大的續航能力足以傲視同級；320 千瓦功率車型在 5 秒內便可完成 0-100 公里加速，最高時速可達 250 公里。 昶洧董事長沈瑋表示，公司歷經 5 年多研發，於本屆法蘭克福國際車展上展出 Thunder Power 豪華電動車系列，選擇在此舉行全球首秀，希望吸引全球媒體、投資人和消費者的目光；相信電動車成為主流並取代內燃發動機汽車，不再是不可能的事，而只是時間問題。
