VUE参数和过滤器

最新推荐文章于 2023-01-31 10:20:38 发布

Zh.晨光

最新推荐文章于 2023-01-31 10:20:38 发布

阅读量681

点赞数

分类专栏：前端技术道本自然文章标签： VUE 过滤器 filter

本文链接：https://blog.csdn.net/zhangchen124/article/details/85681175

版权

道本自然同时被 2 个专栏收录

743 篇文章 39 订阅

订阅专栏

前端技术

260 篇文章 18 订阅

订阅专栏

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

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

效果如下：

Zh.晨光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
VUE参数和过滤器

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;参数&lt;/..
复制链接

扫一扫