VUE
模板指令
- 還記得underscore.js中if如何書寫的嗎梗肝？
<script src='underscore.js'></script>
<script id="tpl" type="text/template">
<%if (isShow) {%><h1><%=title%></h1><%} else {%> <h1><%=otherTitle%></h1> <%}%>
</script>
<script>
var data = {
isShow:true,
title:'hello',
otherTitle:'world'
}
var demo = _.template(document.getElementById('tpl').innerHTML)(data)
console.log(demo)
</script>
條件判斷v-if
- 直接在元素上添加v-if
- 如果該數(shù)據(jù)KEY是true的話榛瓮，我們將該dom元素顯示，否則將該dom元素隱藏
- v-else: 與v-if配合使用巫击，如果if不成立則顯示v-else禀晓；
<div id="app">
<h1><span v-if="isSpecial">特價(jià)</span><span v-else>原價(jià)</span>{{price | currency "￥"}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isSpecial:false,
price:100
}
})
</script>
- 如果要操作多個(gè)元素判斷，可以使用template標(biāo)簽
<div id="app">
<h1>
<template v-if="isSpecial">
<span>今日</span>
<span>特價(jià)</span>
</template>
<template v-else>
<span>原價(jià)</span>
</template>
{{price | currency "￥"}}
</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isSpecial:false,
price:100
}
})
</script>
- 使用underscore.js把一個(gè)列表渲染出來：
<ul id="app">
</ul>
<script src="../underscore.js"></script>
<script type="text/template" id="tpl">
<%for (var i = 0;i < news.length;i++){%>
<li><%=news[i]%></li>
<%}%>
</script>
<script>
var data = {
news:[
'最高法原副院長(zhǎng)貪1.1億被判無期',
'學(xué)校發(fā)來課表 家長(zhǎng)一點(diǎn)被刷5200',
'懟俄羅斯!特朗普向精英階層表態(tài)'
]
}
var tpl = document.getElementById('tpl').innerHTML;
var html = _.template(tpl)(data);
document.getElementById('app').innerHTML = html;
</script>
使用vue循環(huán)模板
v-for = "item in data"
- item 是data數(shù)組中的一個(gè)成員坝锰；
<div id="app">
<ul>
<!-- li需要循環(huán) 把news中的每一條數(shù)據(jù)轉(zhuǎn)換成item,item被看成是news中的每一個(gè)成員-->
<li v-for="item in news">{{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var data = {
news:[
'最高法原副院長(zhǎng)貪1.1億被判無期',
'學(xué)校發(fā)來課表 家長(zhǎng)一點(diǎn)被刷5200',
'懟俄羅斯!特朗普向精英階層表態(tài)'
]
}
new Vue({
el:"#app",
data:data
})
</script>
- 有時(shí)候data的數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜該如何粹懒？
<div id="app">
<ul>
<!-- li需要循環(huán) 把news中的每一條數(shù)據(jù)轉(zhuǎn)換成item,item被看成是news中的每一個(gè)成員-->
<li v-for="item in news"><span v-if="item.type">{{item.type}} | </span>{{item.title}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var data = {
news:[
{
title:'最高法原副院長(zhǎng)貪1.1億被判無期',
type:''
},
{
title:'學(xué)校發(fā)來課表 家長(zhǎng)一點(diǎn)被刷5200',
type:'金融'
},
{
title:'懟俄羅斯!特朗普向精英階層表態(tài)',
type:'全球'
}
]
}
new Vue({
el:"#app",
data:data
})
</script>
使用v-if:如果type有值，則會(huì)顯示前面的標(biāo)簽顷级，如果沒有則不會(huì)顯示凫乖；
如果v-for需要循環(huán)多個(gè)節(jié)點(diǎn)元素，我們也可以使用template模板
<div id="app">
<ul>
<template v-for="item in news">
<li><span v-if="item.type">{{item.type}} | </span>{{item.title}}</li>
<hr>
</template>
</ul>
</div>
v-show
v-show = "key",如果key是true,則顯示該元素弓颈；
他的作用也是顯示帽芽，但是只能處理一個(gè)標(biāo)簽；
實(shí)現(xiàn)支付寶登錄頁面實(shí)時(shí)輸入框輸入內(nèi)容后翔冀，顯示下拉框匹配郵箱后綴的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.app{
margin:50px auto;
width: 500px;
border:1px solid #ccc;
padding-top: 5px;
}
label{
width: 120px;
display: inline-block;
text-align: right;
}
input{
height: 40px;
line-height: 40px;
padding-left: 10px;
width: 250px;
}
ul{
padding: 0;
list-style: none;
border:1px solid #ccc;
width: 250px;
margin-left: 120px;
margin-top: -1px;
}
li{
list-style: none;
padding: 0;
}
li:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<div id="app" class="app">
<div>
<label for="inp">用戶名</label><input type="text" id="inp" v-model="num">
<ul v-show="checkNum">
<!-- 由于email數(shù)據(jù)是一個(gè)數(shù)組 所以渲染列表要循環(huán)-->
<li v-for="item in email">{{num}}{{item}}</li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
num:'',
email:['@qq.com','@163.com','@139.com','@sina.com','@189.com']
},
computed:{
checkNum:function(){
return this.num && this.num.indexOf('@') < 0
}
}
})
</script>
</body>
</html>
