VUE参数和过滤器

时间 2021-08-13

标签 javascript html 前端 vue java api ide 函数布局 this 栏目 JavaScript 繁體版

原文原文链接

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

<!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:
				}
			});
		</script>
	</body>
</html>

效果当咱们单击CSDN.net的时候，html

前端效果以下：前端

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

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

<!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指令也能够写成：api

Vue.js 容许你自定义过滤器，被用做一些常见的文本格式化。由"管道符"指示, 格式以下：ide

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

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

过滤器能够串联：布局

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，所以能够接受参数：this

{{ 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>

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

效果以下：