當前位置：
首頁 >
VUE参数和过滤器
發布時間：2024/1/23
43
豆豆
參數在指令后以冒號指明。例如， 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表达式
- 下一篇： VUE计算属性关键词: computed