快捷導(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>chabaoo.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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

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

您可能感興趣的文章:

相關(guān)文章

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