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
- 如果该数据KEY是true的话，我们将该dom元素显示，否则将该dom元素隐藏
- v-else: 与v-if配合使用，如果if不成立则显示v-else；
<div id="app">
<h1><span v-if="isSpecial">特价</span><span v-else>原价</span>{{price | currency "￥"}}</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isSpecial:false,
price:100
}
})
</script>
- 如果要操作多个元素判断，可以使用template标签
<div id="app">
<h1>
<template v-if="isSpecial">
<span>今日</span>
<span>特价</span>
</template>
<template v-else>
<span>原价</span>
</template>
{{price | currency "￥"}}
</h1>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
isSpecial:false,
price:100
}
})
</script>
- 使用underscore.js把一个列表渲染出来：
<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:[
'最高法原副院长贪1.1亿被判无期',
'学校发来课表 家长一点被刷5200',
'怼俄罗斯!特朗普向精英阶层表态'
]
}
var tpl = document.getElementById('tpl').innerHTML;
var html = _.template(tpl)(data);
document.getElementById('app').innerHTML = html;
</script>
使用vue循环模板
v-for = "item in data"
- item 是data数组中的一个成员；
<div id="app">
<ul>
<!-- li需要循环 把news中的每一条数据转换成item,item被看成是news中的每一个成员-->
<li v-for="item in news">{{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
var data = {
news:[
'最高法原副院长贪1.1亿被判无期',
'学校发来课表 家长一点被刷5200',
'怼俄罗斯!特朗普向精英阶层表态'
]
}
new Vue({
el:"#app",
data:data
})
</script>
- 有时候data的数据结构比较复杂该如何？
<div id="app">
<ul>
<!-- li需要循环 把news中的每一条数据转换成item,item被看成是news中的每一个成员-->
<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:'最高法原副院长贪1.1亿被判无期',
type:''
},
{
title:'学校发来课表 家长一点被刷5200',
type:'金融'
},
{
title:'怼俄罗斯!特朗普向精英阶层表态',
type:'全球'
}
]
}
new Vue({
el:"#app",
data:data
})
</script>
使用v-if:如果type有值，则会显示前面的标签，如果没有则不会显示；
如果v-for需要循环多个节点元素，我们也可以使用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,则显示该元素；
他的作用也是显示，但是只能处理一个标签；
实现支付宝登录页面实时输入框输入内容后，显示下拉框匹配邮箱后缀的例子：
<!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数据是一个数组 所以渲染列表要循环-->
<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>
