精品课程网站建设论文/免费模板网站
一、过滤器
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.org/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.org/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.org/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.org/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.org/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.com',slogan: '学的不仅是技术，更是梦想！'}}})</script>
</body>
</html>
4.第三个参数为索引：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<script src="https://cdn.staticfile.org/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.com',slogan: '学的不仅是技术，更是梦想！'}}})new Vue({el:'#app2',data:{object:{name:'菜鸟教程',url: 'http://www.runoob.com',slogan: '学的不仅是技术，更是梦想！'}}})</script>
</body>
</html>