vue.js基礎知識篇(4):過濾器、class與style的繫結2
第一章:過濾器
過濾器是對資料進行處理並返回結果的函式。
1.語法
語法是使用管道符“|”進行連線。過濾器可以接收引數，跟在過濾器後面，帶引號的引數被當做字串處理，不帶引號的引數被當做資料屬性名處理。
{{message | filterFunction "arg1" arg2 }}vue.js支援在任何出現表示式的地方新增過濾器。
vue.js支援鏈式呼叫，上一個過濾器的輸出結果作為下一個過濾器的輸入。類似於Linux shell的管道符(|)使用。
<span>{{"ddfe"|capitalize|reverse}}</span> <!--ddfe->Ddfe->efdD-->
2.內建過濾器
(1)字母操作capitalize、uppercase、lowercase
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字母操作過濾器</title> </head> <body> <div id="app"> <div>{{"ddfe"|capitalize}}</div> <div>{{"ddfe"|uppercase}}</div> <div>{{"DDFE"|lowercase}}</div> </div> <!--"ddfe"=>capitalize--> <script src="js/vue.js"></script> <!--它以vue物件的形式掛載到window物件上--> <script> new Vue({ el:"#app" }) </script> </body> </html>
(2)json過濾器
先看它如何使用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div >{{didiFamily|json}}</div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ didiFamily:{ "name":"ddfe", "age":3 } } }) </script> </body> </html>
瀏覽器的顯示結果:
再來看一下原始碼。
json: { read: function read(value, indent) { return typeof value === 'string' ? value : JSON.stringify(value, null, Number(indent) || 2); }, write: function write(value) { try { return JSON.parse(value); } catch (e) { return value; } } }
主要說一說，JSON的stringify函式和JSON的parse函式。
stringify函式的功能是把物件或者陣列轉換為JSON字串。parse函式的功能是把有效的json字串解析為物件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json過濾器</title> </head> <body> </body> <script> var a = {a:1,b:2}; var str=JSON.stringify(a);//"{"a":1,"b":2}" var ps=JSON.parse(str);//{a:1,b:2} </script> </body> </html>
(3)限制過濾器limitBy、filterBy、orderBy
這3個過濾器處理的資料必須是陣列，否則程式會報錯。
limitBy顯示以偏移量(預設為0)開始的N個數組。
filterBy要麼處理陣列搜尋字串(引數提供)，要麼處理物件對所有屬性搜尋字串，如果提供特定屬性，使用"in"語法。
orderBy如果引數小於0，那麼是降序排列，如果引數大於0，那麼是升序排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="num in nums| limitBy 10"> <div>{{num}}</div> <!--顯示從預設的0開始的10個元素--> </div> <div v-for="num in nums| limitBy 10 2"> <div>{{num}}</div> <!--顯示從索引為2開始的10個元素--> </div> <div>{{arr|filterBy "hello"}}</div> <input v-model="name"/> <ul> <li v-for="user in users|filterBy name in 'name'"> {{user.name}} </li> <!--動態引數作為搜尋欄位--> </ul> <div>{{nums|orderBy -1}}</div> <!--引數小於,0，那麼是降序排列，引數大於0，那麼是升序排列--> <div>{{nums|orderBy 1}}</div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ nums:[1,2,3,4,5,6,7,18,9,10,11,12,13], arr:["hello1","hello2","hello3","welcome"], users:[ {name:"Bruce"}, {name:"Chuck"}, {name:"Jackie"} ], name:"" } }) </script> </body> </html>
(4)currency過濾器
作用是給數字添上貨幣符號，預設的為$美元。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div>{{"122334"|currency "￡"}}</div>相關推薦
vue.js基礎知識篇(4):過濾器、class與style的綁定2
input事件 自定義 size reverse 註意點 參數 in use num -h 代碼下載:網盤 歡迎私信 第一章:過濾器 過濾器是對數據進行處理並返回結果的函數。 1.語法 語法是使用管道符“|”進行連接。過濾器可以接收參數，跟在過濾器後面，帶引號的參數被當做字
vue.js基礎知識篇(4):過濾器、class與style的繫結2
第一章:過濾器過濾器是對資料進行處理並返回結果的函式。1.語法語法是使用管道符“|”進行連線。過濾器可以接收引數，跟在過濾器後面，帶引號的引數被當做字串處理，不帶引號的引數被當做資料屬性名處理。{{message | filterFunction "arg1" arg2 }}
Vue.js基礎學習（三、Class 與 Style 繫結）
Class 與 Style 繫結 Class 與 Style 繫結 1.建立一個 Vue 例項 1.1 物件語法 1.2 陣列語法 1.3 用在元件上 2.繫結內聯樣式 2.1
vue.js基礎知識篇(3):計算屬性、表單控件綁定
multi option || list text 知識 基礎 unset select標簽 第四章:計算屬性 為了避免過多的邏輯造成模板的臃腫不堪，可使用計算屬性來簡化邏輯。 1.什麽是計算屬性 <!DOCTYPE html><html lang="e
vue.js基礎知識篇(8):與服務端通信
add 攔截 數據交互 order solid json ise async params vue.js可以構建一個完全不依賴後端服務的應用APP，同時也可以與服務端進行數據交互來同步界面的動態更新。vue-resource實現了基於AJAX、JSONP等技術的服務端通信。
vue.js入門（3-4）（methods，屬性繫結）
//index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <scri
【vue大師晉級之路第一集：Vue基礎】第5章——Class 與 Style 繫結
Class 與 Style 繫結 操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue
Vue-----Class與Style繫結
1.1繫結HTML Class 我們可以傳給 v - bind : class 一個物件，以動態地切換 class 。這裡 v-bind ： class 可以和普通的 class 共存。 <div id="app" class="static" v-bind:class="{'didi-o
vue練習demo 實現簡單的輪播圖,方法簡單快捷,使用到transition-group標籤增加使用者體驗 以及vue中的class與style繫結
結構程式碼: <div class="slider"> <div class="slidershow"> <!-- <transition-group tag="ul">
Vue：學習筆記（五）-Class 與 Style 繫結
提醒 原帖完整收藏於IT老兵驛站，並會不斷更新。 前言 本篇繼續對Vue的【Class 與 Style 繫結】篇進行總結學習。 正文 操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需
vue學習：v-blind及class與style繫結
文章內容源於《Vue.js實戰》 一、瞭解v-bind指令 首先介紹基本用法和它的語法糖，主要用法是動態更新HTML元素上的屬性： <div id="app" > <a v-bind:href="url">連結<a> <img v-bind:
Vue學習筆記（Class與style繫結）
1.Class繫結 在Vue中，如果要為這樣的一個div的class屬性進行動態賦值 <div class="active text-danger">class1</div> 可以使用v-bind，一般有以下三種寫法： <div v-bind:c
vue學習筆記---class與style繫結以及條件渲染
繫結HTML Class#物件語法我們可以傳給 v-bind：class一個物件，以動態切換class<div v-bind:class="{ active: isActive }"></div>上面的語法表示active這個class存在與否取決於屬
vue.js基礎02--計算屬性(computed、watch、&watch)、過濾器、自定義元件（component、components）
1.vue例項中的計算屬性選項 計算屬性關鍵詞: computed。 在一個計算屬性裡可以完成各種複雜的邏輯，包括運算、函式呼叫等，只要最終返回一個結果就可以。 <body> <div id="example"> <p>Ori
vue,js基礎知識
一個 簡單的 blog view bind model 速度 問題： 快捷方式 Vue.js是一套構建用戶界面（view）的MVVM框架。Vue.js的核心庫只關註視圖層，並且非常容易學習，非常容易與其他庫或已有的項目整合。 1.1 Vue.js的目的 Vue.js的產生核
Js基礎知識1-對象、對象屬性全解
字母 net all ini key 路徑 fun 日期函數 light Object對象 Object對象包含如下屬性和方法，也就意味著一切對象（函數也是對象）都包含如下方法。 每種方法和屬性在不同的對象中有不同的作用，並不是每種對象都有使用每個方法的必要。 下面是O
vue.js基礎知識整理
1. Vue 例項 1.1 建立一個Vue例項 一個 Vue 應用由一個通過 new Vue 建立的根 Vue 例項，以及可選的巢狀的、可複用的元件樹組成。demo 1.2 資料與方法 資料的響應式渲染 當一個 Vue 例項被建立時，它向
Deep Learning讀書筆記1--基礎知識篇（第二、三、四、五章）
Deep Learning An MIT Press book Ian Goodfellow and Yoshua Bengio and Aaron Courville 英文原版
Vue架構【基礎篇-第06章】：class和style繫結
class和style繫結 操作元素的 class 列表和內聯樣式是資料繫結的一個常見需求。因為它們都是屬性，所以我們可以用 v-bind 處理它們：只需要通過表示式計算出字串結果即可。不過，字串拼接麻煩且易錯。因此，在將 v-bind 於 class&nb
vue.js中關於下拉框的值預設及繫結問題
一、今天遇到vue中下拉框問題，故而寫點東西留個腳印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) i