快捷導航

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

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

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

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

一、模板

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn 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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

您可能感興趣的文章:

相關(guān)文章

Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式
這篇文章主要介紹了Vue之el-select結(jié)合v-if動態(tài)控制template顯示隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Elementui如何限制el-input框輸入小數(shù)點
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue 折疊展示多行文本組件的實現(xiàn)代碼
這篇文章主要介紹了vue 折疊展示多行文本組件，自動根據(jù)傳入的expand判斷是否需要折疊，非常完美，文章通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2021-10-10
關(guān)于配置babel-plugin-import報錯的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報錯的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
使用Vue3和Pinia實現(xiàn)網(wǎng)頁刷新功能
在現(xiàn)代 Web 開發(fā)中,保持用戶界面的動態(tài)性和響應性至關(guān)重要,當用戶觸發(fā)某些操作時,例如點擊按鈕或者完成表單提交,我們往往需要刷新頁面的一部分來展示最新的數(shù)據(jù),本文將介紹如何使用 Vue 3 和 Pinia 來實現(xiàn)這一功能,需要的朋友可以參考下
2024-08-08
記一次vue-webpack項目優(yōu)化實踐詳解
這篇文章主要介紹了記一次vue-webpack項目優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
vue實現(xiàn)點擊出現(xiàn)操作彈出框的示例
這篇文章主要介紹了vue實現(xiàn)點擊出現(xiàn)操作彈出框的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-11-11
Vue項目設(shè)置可以局域網(wǎng)訪問
這篇文章主要介紹了Vue項目設(shè)置可以局域網(wǎng)訪問，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue中Vue-Baidu-Map基本使用方法實例
最近有一個項目需要用到地圖來展示位置并進行數(shù)據(jù)交互,用vue-baidu-map實現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下
2023-03-03
vue+iview實現(xiàn)文件上傳
這篇文章主要為大家詳細介紹了vue+iview實現(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-11-11