vue基础之模板和过滤器用法实例分析


Posted in Javascript onMarch 12, 2019

本文实例讲述了vue基础之模板和过滤器用法。分享给大家供大家参考,具体如下:

一、模板

{{msg}} 数据更新模板变化
{{*msg}} 数据只绑定一次
{{{msg}}} HTML转意输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com 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>

vue基础之模板和过滤器用法实例分析

二、过滤器

过滤器:-> 过滤模板数据

系统提供一些过滤器:

{{msg| filterA}}
{{msg| filterA | filterB}}
uppercase    eg: {{'welcome'| uppercase}}
lowercase
capitalize  首字母大写
currency 钱
{{msg| filterA 参数}}

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
React中this丢失的四种解决方法
Mar 12 #Javascript
使用koa2创建web项目的方法步骤
Mar 12 #Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 #Javascript
Vue项目引发的「过滤器」使用教程
Mar 12 #Javascript
通过JS运行机制的角度说说作用域
Mar 12 #Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 #jQuery
You might like
PHP 字符串分割和比较
2009/10/06 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
python获取Linux发行版名称
2019/08/30 Python
python修改FTP服务器上的文件名
2019/09/11 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
几个常见的软件测试问题
2016/09/07 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
《钱学森》听课反思
2014/03/01 职场文书
工资收入证明
2014/10/07 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
500字作文之周记
2019/12/13 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
python实现简单区块链结构
2021/04/25 Python
解析MySQL索引的作用
2022/03/03 MySQL