Vue初體驗（五）過濾器的使用

阿新 • • 發佈：2018-12-09

Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。使用格式為：

<!-- 在兩個大括號中 -->{{ message | capitalize }}<!-- 在 v-bind 指令中 --><divv-bind:id="rawId | formatId"></div>

示例程式碼：

<!DOCTYPE html><html><head><metacharset="utf-8"><title>Vue學習</title><scriptsrc= 
"https://unpkg.com/vue/dist/vue.js"></script></head><style>.style{
            color: red
        }
    </style><body><divid="app">{{ message | capitalize }}</div><script>new Vue({
                el: '#app',
                data: {
                    message:  
"ssssssssssssss"
                },
                methods: {

                },
                filters: {
                    capitalize: function(value){if(!value){
                            return""
                        }else{
                            value = value.toString();
                             
return value.charAt(0).toUpperCase() + value.slice(1);
                        }


                    }
                }
            })
        </script></body></html>

這裡的重點是下面需要配置一個filters，裡面的函式是過濾器，必須返回一個過濾後的value。下一篇：Vue初體驗（六）元件化component

Vue初體驗（五）過濾器的使用

Vue.js 允許你自定義過濾器，被用作一些常見的文字格式化。使用格式為： {{ me

zTree初體驗（五）——樹間資料交換

我發現，樹與樹之間的交換，在網站中的應用並不多，其實這是一個很好的功能。比如說，我們專案中用的的“自定義關注”功能。因為在我們的日常工作中，我們不會跟所有人都有工作交集，相反我們總是在頻繁的跟一部分人打交道，也就是我們關注的並不是所有人，而只是跟我們工作相關

Vue初體驗（七）使用Vue實現一個簡單的聊天框

1、實踐是檢驗真理的唯一標準，現在我們做一個簡易的聊天視窗，有一個input框，用於使用者輸入，一個按鈕button，用於把使用者的輸入

Vue-Cli3初體驗（一）

前段時間看到一篇關於vue-cli3的文章，看到和老版本的vue-cli有很大的區別，就自己試試踩踩坑。 vue cli是一個基於Vue.js進行快速開發的完整系統。它通過@vue/cli的方式搭建互動式的專案腳手架它通過@vue/cli + @vue/cli-se

Vue-Cli3初體驗（二）

CLI服務 CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，區域性安裝在每個 @vue/cli 建立的專案中。CLI 服務是構建於 webpack 和 webpack-dev-server 之上的。它包含了：載入其它 CLI

zTree初體驗（一）——小試牛刀

插件 root tracking per margin 接受 dsm 獲取實現 zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大長處。 ——zTree官網 zTree v3

git系列1之安裝初體驗（windows）

conf pan cnblogs it管理 png 下一步 rac -1 stage 1.百度雲盤地址 https://pan.baidu.com/s/1o8vAt78 2.下載後雙擊直接下一步下一步即可 3.創建一個目錄,並在目錄中創建文件README.CD 4.

Vue入門系列（五）Vue實例詳解與生命周期

auto res context mode parent all from bool silent 【入門系列】【本文轉自】　　http://www.cnblogs.com/fly_dragon Vue的實例是Vue框架的入口，其實也就是前端的ViewM

跟著小甲魚學算法之算法初體驗（1）

-a 這就是網上 clas 序列系列 n) bsp col 　　從網上下載了小甲魚的算法與數據結構視頻，打算把這個系列跟著視頻學完。以達到對算法有初步的了解什麽是算法？　　算法是解決特定問題求解步驟的描述，在計算機中表現為指令的有限序列，並且每條指條表示一個或者

redis 之初體驗（window）

程序 rdl ssi set onf 解釋 -c 控制 edi 1 下載window版本的redis :https://github.com/MSOpenTech/redis/releases 2 解壓壓縮包。我的放在了E盤： E:/redis 3 程序，輸入cmd

ansible-playbook劇本初體驗（二）

地址 ans 服務環境 mar restart sts 修改配置劇本實驗目的: 通過ansible劇本對被管理端進行部署httpd服務，並且修改配置文件，啟動服務。操作環境操作系統 IP地址角色 Centos7 192.168.71.129 ans

Spring Boot 初體驗（9）使用thymeleaf

步驟：在pom.xml中引入thymeleaf <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp

Spring Boot 初體驗（10）使用使用freemarker

一：在pom.xml中引入freemarker <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boo

Qt初體驗（二）

QT初體驗（二） 1.視窗跳轉　　想到視窗跳轉的實現方式，應該很容易想到新建開啟新的視窗，然後關閉當前視窗　　首先我們得新建一個視窗的類，然後在當前類中建立這個類的物件，呼叫Show（）函式顯示出新視窗，close（）函式關閉當前視窗　　實現的方式大概就是下面這個樣子： ui2 = ne

Kotlin初體驗（三）- 字串和容器

字串字串與基本資料型別轉換基本資料型別轉String，在上一篇部落格已經講過，呼叫toString（），反過來，字串又該如何轉換成基本資料型別呢？請看下錶字串轉換為其他資料型別的Kotlin與Java方式對比字串轉換目標 Kotlin轉換方式 J

Kotlin之初體驗（四）- 控制語句

條件分支條件分支是最簡答的控制語句，主要包括兩路分支和多路分支，我們一起探索下Kotlin給條件分支帶來了哪些變化簡單條件分支直接上程式碼： var i = 0 textView.text = "開關" //類似Java

Spring Boot 初體驗（11）新增JSP支援

第一步:配置 application.properties ######################################################## ### JSP的支援 ############################################

Burp Suit的軟體的使用初體驗（1）

Burp Suit的安裝和使用 Burp Suite對於網站應用程式的掃描來說，絕對是必不可少的大神奇，他可以幫助滲透測試人員方便的開展全方位的網站滲透測試，這對於漏洞和資訊的獲取極為關鍵，因為絕大多數的網路滲透總是從Web上開始的。首先,我們需要的是安裝Bu

Java8初體驗（二）Stream語法詳解

感謝同事【天錦】的投稿。投稿請聯絡 [email protected] 上篇文章Java8初體驗（一）lambda表示式語法比較詳細的介紹了lambda表示式的方方面面，細心的讀者會發現那篇文章的例子中有很多Stream的例子。這些Stream的例子可能讓你產生疑惑，本文將會詳細講解

Java8初體驗（一）lambda表示式語法

感謝同事【天錦】的投稿。投稿請聯絡 [email protected] 本文主要記錄自己學習Java8的歷程，方便大家一起探討和自己的備忘。因為本人也是剛剛開始學習Java8，所以文中肯定有錯誤和理解偏差的地方，希望大家幫忙指出，我會持續修改和優化。本文是該系列的第一篇，主要介紹Ja

Vue初體驗（五）過濾器的使用

相關推薦