<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></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}}}   //解析html<h1></h1>

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

        .red{

            color: red;

        }

        .blue{

            background: blue;

        }

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            new Vue({

                el:'#box',

                data:{

                }

            });

        };

    </script>

</head>

<body>

    <div id="box">

        {{'welcome'|uppercase}}  //转大写过滤器

                <br>

        {{'WELCOME'|lowercase}}

        {{'WELCOME'|lowercase|capitalize}}   //首字母大写过滤器

        {{12|currency '￥'}}  //￥12.00

        {{12|currency}}  // $12.00

    </div>

</body>

</html>

vue5 过滤器 模版的更多相关文章

  1. 63、django之模版层（template）

    上篇主要介绍了django的MTV模型,主要介绍了视图层之路由配置系统url分发和视图层之视图函数view,本篇主要讲解MTV模型中的模版层template. 模版层(template) 一.模版简介 ...

  2. django之模版层（template）

    上篇主要介绍了django的MTV模型,主要介绍了视图层之路由配置系统url分发和视图层之视图函数view,本篇主要讲解MTV模型中的模版层template. 本篇导论: 模版简介 模版之变量 模版之 ...

  3. 5 JInja2模版（适用于Django和Flask）

    模版 在生产环节下,我们要把后端程序(其实就是python)计算出来的数据和html页面结合起来做,这个时候模版就派上大用处了. Flask下的模版---Jinja2 Jinja是日本寺庙的意思,并且 ...

  4. django-CBV刨析、模板层

    今日内容概要 CBV源码剖析 模版层 模版语法传值 模版语法之过滤器 模版语法之标签 自定义过滤器.标签及inclusion_tag 模版的继承 模版的导入 FBV与CBV ""& ...

  5. Django学习day05随堂笔记

    每日测验 """ 今日考题 1.反向解析的本质是什么,无名和有名反向解析如何操作? 2..路由分发能够实现的前提是什么,需要注意什么,名称空间什么时候使用 3..什么是虚 ...

  6. ansible基础-Jinja2模版 | 过滤器

    Jinja2模版介绍 注:本文demo使用ansible2.7稳定版 在ansible基础-变量的「8.2 模版使用变量」章节中关于模版与变量也有所提及,有兴趣的同学可以去回顾一下. ansible通 ...

  7. Django 模版过滤器

    模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用.一般在Python中我们是通过函数的形式来完成的.而在模版中,则是通过过滤器来实现的.过滤器使用的是|来使用.比如使用add过滤器, ...

  8. Django内置模版过滤器

    Django内置过滤器总览 可以查询下表来总览Django的内置过滤器: 过滤器 说明 add 加法 addslashes 添加斜杠 capfirst 首字母大写 center 文本居中 cut 切除 ...

  9. django系列4.1--模版系统,过滤器,标签,模版继承,组件

    django 模版系统 一. 语法 { { 变量 } } {% 表达式 %} 二. 变量 { {变量名} } 深度查询据点符( . )在模版语言中有特殊的含义. 当模版系统遇到点(.) 查询顺序如下: ...

随机推荐

  1. POJ-2318 TOYS 计算几何 判断点在线段的位置

    题目链接:https://cn.vjudge.net/problem/POJ-2318 题意 在一个矩形内,给出n-1条线段,把矩形分成n快四边形 问某些点在那个四边形内 思路 二分+判断点与位置关系 ...

  2. Oralce 视图 view

    Oracle视图 Oracle的数据库对象分为五种:表,视图,序列,索引和同义词. 视图是基于一个表或多个表或视图的逻辑表,本身不包含数据,通过它可以对表里面的数据进行查询和修改.视图基于的表称为基表 ...

  3. ZOJ 3369 Saving Princess

    Saving Princess Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...

  4. 洛谷 P2818 天使的起誓

    P2818 天使的起誓 题目描述 Tenshi非常幸运地被选为掌管智慧之匙的天使.在正式任职之前,她必须和其他新当选的天使一样要宣誓.宣誓仪式是每位天使各自表述自己的使命,他们的发言稿放在n个呈圆形排 ...

  5. 精品JS代码收藏大全

    1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu ...

  6. [Typescript] Build Method decorators in Typescript

    To using decorate, we can modifiy tsconfig.json: { "compilerOptions": { ... "experime ...

  7. HDU 2196 Computer（求树上每一个节点到其他点的最远距离）

    解题思路: 求出树的直径的两个端点.则树上每一个节点到其它点的最远距离一定是到这两个端点的距离中最长的那一个. #include <iostream> #include <cstri ...

  8. gcc 源代码下载地址

    ftp://mirrors-usa.go-parts.com/gcc/releases/

  9. 几种常见sqlalchemy查询：

        #简单查询     print(session.query(User).all())     print(session.query(User.name, User.fullname).all ...

  10. 9. IntelliJ Idea 集成svn 和使用

    转自:http://www.cnblogs.com/zhanghaoliang/p/6206948.html 最近公司的很多同事开始使用IntelliJ Idea,便尝试了一下,虽然快捷键与eclip ...