快捷導(dǎo)航

vue基礎(chǔ)之模板和過濾器用法實(shí)例分析

更新時(shí)間：2019年03月12日 11:37:54 作者：白楊-M

這篇文章主要介紹了vue基礎(chǔ)之模板和過濾器用法,結(jié)合實(shí)例形式分析了vue模板與過濾器的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了vue基礎(chǔ)之模板和過濾器用法。分享給大家供大家參考，具體如下：

一、模板

{{msg}} 數(shù)據(jù)更新模板變化
{{*msg}} 數(shù)據(jù)只綁定一次
{{{msg}}} HTML轉(zhuǎn)意輸出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>m.fzitv.net vue模板</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js" async></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          msg:'abc'
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg">
    <br>
    {{msg}}
    <br>
    {{*msg}}
    <br>
    {{{msg}}}
  </div>
</body>
</html>

二、過濾器

過濾器:-> 過濾模板數(shù)據(jù)

系統(tǒng)提供一些過濾器:

{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase    eg: {{'welcome'| uppercase}}
lowercase
capitalize 首字母大寫
currency 錢
{{msg| filterA 參數(shù)}}

{{'welcome'|uppercase}}    //WELCOME
{{'WELCOME'|lowercase}}   //welcome
{{'WELCOME'|lowercase|capitalize}}   //Welcome
{{12|currency}} //$12.00
{{12|currency '￥'}} //￥12.00

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

一篇超完整的Vue新手入門指導(dǎo)教程
這篇文章主要給大家介紹了關(guān)于Vue入門的相關(guān)資料，是一篇超完整的Vue入門教程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
vue中插值表達(dá)式使用的示例詳解
Vue的插值表達(dá)式是一種特殊的語法,用于在模板中動(dòng)態(tài)地將數(shù)據(jù)綁定到視圖中,一般使用雙大括號(hào) ("{{ }}")將表達(dá)式包裹起來,下面我們就來根據(jù)三個(gè)案例來深入了解下插值表達(dá)式的使用吧
2023-11-11
vue項(xiàng)目中,main.js,App.vue,index.html的調(diào)用方法
今天小編就為大家分享一篇vue項(xiàng)目中,main.js,App.vue,index.html的調(diào)用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
web面試vue自定義組件及調(diào)用方式
這篇文章主要介紹了web面試中常問到的關(guān)于vue自定義組件及調(diào)用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-09-09
vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能)
這篇文章主要介紹了vue中子組件向父組件傳遞數(shù)據(jù)的實(shí)例代碼(實(shí)現(xiàn)加減功能) ,需要的朋友可以參考下
2018-04-04
vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作
這篇文章主要介紹了vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
詳解vue mixins和extends的巧妙用法
vue提供了mixins、extends配置項(xiàng)，最近使用中發(fā)現(xiàn)很好用。下面小編通過本文給大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧
2017-12-12
vuex(vue狀態(tài)管理)的特殊應(yīng)用案例分享
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
2020-03-03
如何實(shí)現(xiàn)一個(gè)簡易版的vuex持久化工具
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)簡易版的vuex持久化工具，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09