VUE參數和過濾器

時間 2021-08-13

標籤 html 前端 vue api ide 函數佈局 this url spa 欄目 HTML 简体版

原文原文鏈接

參數在指令後以冒號指明。例如， v-bind 指令被用來響應地更新 HTML 屬性，在這裏 href 是參數，告知 v-bind 指令將該元素的 href 屬性與表達式 url 的值綁定。 html

<!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.netvue

前端效果以下：api

v-on 指令，它用於監聽 DOM 事件 ide

下面是針對字符串反轉的案例：函數

<!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 容許你自定義過濾器，被用做一些常見的文本格式化。由"管道符"指示, 格式以下：this

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

過濾器函數接受表達式的值做爲第一個參數。url

過濾器能夠串聯：spa

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

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

效果以下：