VUE參數和過濾器

參數在指令後以冒號指明。例如, 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>

 

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

 效果以下:

相關文章
相關標籤/搜索