Vue指令与过滤器

1.指令

什么是指令和作用

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

作用：更新元素的textContent，若只更新部分文本内容需要使用{{ Mustache }}插值。

主要指令

V-model

用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

示例

//动态获取文本框中的值计算总价
<div id="adp">
单价:<input v-model="price" />
				数量:<input v-model="num" />
				总价:{{total}}
</div>

核心定义部分

<script type="text/javascript">
		el:'#adp',
		data:{
			price:16, 
			num:1
		},
		computed:{
			total(){
				return parseInt(this.price) * parseInt(this.num);
			}
		}
		
		
	})
	</script>
	

V-if，v-else-if，v-else

v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

 他们只能是兄弟元素

 v-else-if上一个兄弟元素必须是v-if

 v-else上一个兄弟元素必须是v-if或者是v-else-if

示例（根据文本框中的值来进行判断）

<div id="adp">
                    <div v-if="score > 90">A</div>
					<div v-else-if="score > 80">B</div>
					<div v-else-if="score > 70">C</div>
					<div v-else-if="score > 60">D</div>
					<div v-else="">E</div>
					<input type="text" v-model="score" />
</div>

在vm中定义score属性用于数据绑定

<script type="text/javascript">
	new Vue({
		el:'#adp',
		data:{
		score:80
		}
		
	})
	</script>

v-show指令

V-show指令能够对标签中的类容显示和隐藏

v-show与v-if指令的区别

v-show指令与v-if指令都能对标签中的类容进行显示与隐藏，它们的区别在于：
v-if:控制的是标签是否打印
v-show:控制的是标签的样式

示例

<div id="adp">
        <div v-show="flag">宝可梦01</div>
		<div v-if="flag">宝可梦02</div>
		</div>

当v-show与v-if都不打印时：

<script type="text/javascript">
	new Vue({
		el:'#adp',
		data:{
		flag:false,
		}
		
	})
	</script>

通过查看浏览器的控制面板可以看到v-if指令是没有在面板中打印，而v-show指令则是被隐藏了

V-for指令

v-for：类似JS的遍历，
遍历数组: v-for=“item in items”, items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

示例

<div id="adp">
                    <h3>V-for指令</h3>
					<div v-for="item,index in data1">
						{{index}}-{{item}}<br>
					</div><br><hr />
					<div v-for="item,index in data2">
						{{index}}~~{{item.id}}~~{{item.name}}<br>
					</div>
					</div>

vm中定义

<script type="text/javascript">
	new Vue({
		el:'#adp',
		data:{
		data1:[1,4,5,7,23],
		data2: [{
 		id: 1,
		name: '五子棋'
		},
		{
		id: 2,
		name: '跳棋'
		},
		{
		id: 3,
		name: '军旗'	
		}],
		
		}
		
	})
	</script>
	

过滤器

Vue.js 允许你自定义过滤器，可用于一些常见的文本格式化。
过滤器应该被添加在 JavaScript 表达式的尾部，由“{}”符号指示

过滤器分类

过滤器分为两种，一种是局部过滤器，一种全局过滤器。所有的过滤器都是函数，并且参数为要过滤的数据。

局部过滤器：只允许在当前组件中使用
全局过滤器：所有组件都可以使用

局部过滤器对msg进行过滤

<div id="adp">
	<h3>局部过滤</h3>
		{{msg|a}}
		</div>

vm中定义

<script type="text/javascript">		
	new Vue({
		el:'#adp',
		data:{
			msg:'https://www.baidu.com',
		},
		filters:{
			'a':function(v){
				console.log(v);
				return v.substring(0,16);
			}
		
	})
	</script>
	

全局过滤器

<div id="adp">
<h3>全局过滤器的注册</h3>
				{{msg|c}}
				</div>

创建 Vue 实例之前全局定义过滤器：

<script type="text/javascript">		
		Vue.filter('c',function(v){
			console.log(v);
			return v.substring(10,16);
		})
</script>

我们还能将过滤器进行串联只需用“|”号进行分隔，提高了过滤器的可用性，如我们可以将上面的a过滤器与c过滤器进行串联

<div id="adp">
<h3>全局过滤器的注册</h3>
				{{msg|c}}
</div>