VUE参数和过滤器

项目
实战项目总结分析,源代码,视频分享
tea_year

参数在指令后以冒号指明。例如, 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>

 

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

 效果如下:

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读