VUE参数和过滤器
2021-01-10 22:16
686 查看
参数在指令后以冒号指明。例如, 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>
实例对输入的字符串第一个字母转为大写:
效果如下:
相关文章推荐
- vue.js 过滤器传参数及接收
- vue-resource 设置请求的参数以formData形式以及设置请求的过滤器
- Vue系列十一:过滤器
- vue 打开新窗口传参以及新窗口接受参数
- Vue入门三、过滤器filter
- vue 全局过滤器(单个和多个过滤器)
- vue 路由跳转传参数
- vue过滤器 filters
- vue之过滤器
- 零xml配置Spring MVC过滤器解决中文参数乱码
- vue中的过渡&动画 动态组件 过滤器
- Vue的slot,transition ,动态组件 和 过滤器
- Vue中的计算属性,倾听器,过滤器
- vue中如何不通过路由直接获取url中的参数
- vue webpack初始化项目(vue init webpack my-project )参数详解
- $filter 在视图和控制器的使用以及自定义带参数的过滤器
- vue学习小记-过滤器
- Vue + Element-ui的下拉框el-select获取额外参数详解
- 详解解决Vue相同路由参数不同不会刷新的问题
- vue+axios+el-upload实现文件上传(带参数):