Vue學習(過濾器和template標籤)

2021-09-28 15:31:29 字數 2274 閱讀 2010

vue.js 允許你自定義過濾器,被用作一些常見的文字格式化。由"管道符"指示, 格式如下:

<

!-- 在兩個大括號中 --

>

}<

!-- 在 v-bind 指令中 --

>

"rawid | formatid"

>

<

/div>

過濾器函式接受表示式的值作為第乙個引數。

全域性過濾器:

示例:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

>

2.使用過濾器 --

>

}<

/div>

"node_modules/vue/dist/vue.min.js"

>

<

/script>

// 1.全域性定義過濾器

vue.

filter

('myfilter'

,function

(val)

)var vm =

newvue(}

)<

/script>

<

/body>

<

/html>

區域性過濾器:

示例:

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

>

2.使用過濾器 --

>

}<

/div>

"node_modules/vue/dist/vue.min.js"

>

<

/script>

var vm =

newvue(,

filters:}}

)<

/script>

<

/body>

<

/html>

示例:
<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

<

/head>

>

"isshow=!isshow"

>切換模板<

/button>

1.template標籤在頁面中不會渲染。

2.template不支援v-show。

-->

"isshow"

>

註冊"text"

>

<

/div>

<

/template>

else

>

登入"text"

>

<

/div>

<

/template>

<

/div>

"node_modules/vue/dist/vue.min.js"

>

<

/script>

var vm =

newvue(}

)<

/script>

<

/body>

<

/html>

vue學習 過濾器

作用 過濾資料,一般是把伺服器返回的資料,過濾成符合頁面展示的資料 1.私有過濾器 vue.component login data function filters 2.共有過濾器 最好把vue.filter放在元件註冊之前 vue.filter toup function input,name ...

Vue 過濾器案例(全域性過濾器和區域性過濾器)

doctype html en utf 8 viewport content width device width,initial scale 1.0 js vue 2.4.0 js script 過濾器 title head 兩個過濾器的名稱都為msgformat,但是控制不同作用,乙個是全域性的...

vue過濾器和監聽

過濾器 過濾器的主要作用 對資料的處理 獲得乙個時間 一般是時間戳格式 同乙個時間顯示不同的樣子 對資料做處理 返回處理過的新資料 vue.filter 引數1 過濾器名 引數2 是乙個函式 函式的第乙個引數data就是要過濾的資料 也就是管道符號前面的東西 vue.filter hehe data...