vue.js中的指令，过滤器

目录

 

1，什么是指令

2，v-bind指令绑定html属性值和参数

3，过滤器的使用

---

1，什么是指令

指令是带有v-前缀的特殊属性

指令用于在表达式的值改变时，将某些行为应用到DOM上

如下例子，v-if指令将根据表达式seen的值(true,false)来决定是否插入p元素

<div id="app">
	<p v-if="seen">现在能不能看到我</p>
</div>

<script type="text/javascript">
	var myvue = new Vue({
		el:"#app",
		data:{
			seen:false
		}
	})
</script>

 

2，v-bind指令绑定html属性值和参数

 

v-bind主要用于属性绑定，Vue官方提供了一个简写方式:bind，例如：

#完整语法

<a v-bind:href="url"></a>

#缩写

<a :href="url"></a>

eg:

<div id="app">\
	<a v-bind:href="url" v-bind:target="mubiao">去百度</a>
</div>

<script type="text/javascript">
	var myvue = new Vue({
		el:"#app",
		data:{
			url:"http://www.baidu.com",
			mubiao:"_blank"
		}
	})
</script>

3，过滤器的使用

 

vue.js允许自定义过滤器（相当于前面是变量（参数），后面是函数），被用作一些常见的文本格式化。有管道符指示，格式如下：

#在两个大括号中

{{message | capitalize}}

#在v-bind指令中

<div v-bind:id="rawId | formatId"></div>

eg:

<div id="app">
	<p>{{wenzi | zhuanhuan }}</p>
</div>

<script type="text/javascript">
	var myvue = new Vue({
		el:"#app",
		data:{
			wenzi:"hello"
		},
		filters:{
			zhuanhuan:function(cs){
				if(!cs) return "啥也没有"
				// toString() 方法可把一个逻辑值转换为字符串，并返回结果
				cs = cs.toString()
				// charAt(int index)用于返回指定索引处的字符
				// toUpperCase() 方法用于把字符串转换为大写
				// slice() 方法可从已有的数组中返回选定的元素。arrayObject.slice(start,end)
				return cs.charAt(0).toUpperCase()+cs.slice(1)
			}
		}
	})
</script>