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>

實例對輸入的字符串第一個字母轉爲大寫：

效果以下：