一、过滤器
Vue.js允许自定义过滤器，被作用一些常见的文本格式化。由“管道符”所示，格式如下：
1.大括号写法：{{message|capitalize}}
v-bind指令写法：
过滤器函数接收表达式的值作为第一个参数。
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<!--VUE.JS自定义过滤器，被用作一些常见的文本格式化-->
<div id="app">
{{message|capitalize}}
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'runoob'
},
filters:{
capitalize:function(value){
if(!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase()+value.slice(1)
}
}
})
</script>
</body>
</html>
2.过滤器是可以串联的（？）
3.多参数传递给过滤器（？）
二、Vue判断语句
1.v-if 指令将根据表达式的值(true 或 false )来决定是否插入 p 元素。
判断语句还包括v-else、v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<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>
not a/b/c
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
type:"A"
}
})
</script>
</html>
2.v-show
我们也可以使用 v-show 指令来根据条件展示元素：
<div v-show="type==='A'">hello</div>
三、VUE循环语句
1.v-for:“site in sites”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
<div>{{site.name}}</div>
<div>{{site.age}}</div>
</li>
</ol>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
sites:[
{name:'Runoob',age:'17'},
{name:'baidu',age:'18'},
{name:'taobao',age:'19'}
]
}
})
</script>
</html>
2.循环迭代
v-for 可以通过一个对象的属性来迭代数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<ul id="app">
<li v-for="value in object">
{{ value }}
</li>
</ul>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
object:{
name:'菜鸟教程',
url:'http://com',
slogan:'技术和梦想'
}
}
})
</script>
</body>
</html>
3.提供键名进行循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in object">
{{key}} : {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
object:{
name:'菜鸟教程',
url: 'http://www.runoob',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
4.第三个参数为索引：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<ul>
<li v-for="(value,key) in object">
{{key}} : {{value}}
</li>
</ul>
</div>
<div id="app2">
<ul>
<li v-for="(value,key,index) in object">
{{index+1}} . {{key}} : {{value}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
object:{
name:'菜鸟教程',
url: 'http://www.runoob',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
new Vue({
el:'#app2',
data:{
object:{
name:'菜鸟教程',
url: 'http://www.runoob',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
</body>
</html>
更多推荐
Vue.js菜鸟教程自学（二）
发布评论