您的位置:首页 > Web前端 > Vue.js

VUE参数和过滤器

2021-01-10 22:16 686 查看

参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性,在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。 

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>参数</title>		<script src="js/vue.min.js"></script>	</head>	<body>		<!--布局-->		<div id="param">			<pre><a v-bind:href="url">csdn.net</a></pre>		</div>		<!--js-->		<script>			new Vue({				el:'#param',				data:{					url:'http://www.csdn.net'				}			});		</script>	</body></html>

 效果当我们单击CSDN.net的时候,

 

会自动跳转到 http://www.csdn.net

 前端效果如下:

v-on 指令,它用于监听 DOM 事件 

下面是针对字符串反转的案例:

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>v-on案例</title>		<script src="js/vue.min.js"></script>	</head>	<body>		<!--布局-->		<div id="von">			<p>{{msg}}</p>			<button v-on:click="reverseMsg">反转字符串</button>		</div>		<!--js-->		<script>			new Vue({				el:'#von',				data:{					msg:'it技术排行榜'				},				methods:{					reverseMsg:function(){						this.msg=this.msg.split('').reverse().join('')					}				}			})		</script>	</body></html>

v-on指令也可以写成:

 

Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

<!-- 在两个大括号中 -->{{ message | capitalize }}<!-- 在 v-bind 指令中 --><div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

过滤器可以串联:

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

{{ message | filterA('arg1', arg2) }}

这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title>VUE的过滤器</title>		<script src="js/vue.min.js"></script>	</head>	<body>		<!--布局-->		<div id="filter">			{{message|capitalize}}		</div>		<!--js-->		<script>			new Vue({				el:'#filter',				data:{message:'hello Vue'},				filters:{					capitalize:function(value){						if(!value)return''						value=value.toString()						return value.charAt(0).toUpperCase()+value.slice(1)					}				}			});		</script>	</body></html>

 

实例对输入的字符串第一个字母转为大写:

 效果如下:


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: