VUE参数和过滤器
【摘要】
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<!DOCTYPE html><html> <head> <meta charset="U...
参数在指令后以冒号指明。例如， 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>
-
实例对输入的字符串第一个字母转为大写：
效果如下：
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/85681175
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）