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