<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>{{}}的使用</title>

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

 </head>

 <body>

  <div id="container">

        <h1>{{msg}}</h1>

        <h4>{{cart.brand}}</h4>

    <!--在双花括号中  执行运算表达式  -->

    <p> 3 + 5 = {{ 3 + 5 }}</p>

    </div>

    <script>

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs",

                cart:{

                    brand:"Volvo",price:30

                }

            }

        })

    </script>

 </body>

</html>

双花括号的使用：

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>双花括号的练习</title>

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

 </head>

 <body>

 <div>

    双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerHTML中

 </div>

  <div id="container">{{msg}}

        <h4>三目运算3>5:{{3>5?"对":"错"}}</h4>

        <h4>逻辑运算3>5 && 2>1:{{3>5 && 2>1}}</h4>

        <h4>{{!hasMore}}</h4>

        <h4>{{totalNum>count?"大于":"小于"}}</h4>

    </div>

    <script>

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs",

                count:3,

                totalNum:10,

                hasMore:true

            }

        })

    </script>

 </body>

</html>

vue双花括号的使用的更多相关文章

  1. 永远不要使用双花括号初始化实例，否则就会OOM！

    生活中的尴尬无处不在,有时候你只是想简单的装一把,但某些"老同志"总是在不经意之间,给你无情的一脚,踹得你简直无法呼吸. 但谁让咱年轻呢?吃亏要趁早,前路会更好. 喝了这口温热的鸡 ...

  2. vue与node模版引擎的渲染标记{{}}(双花括号)冲突

    由于之前练习koa2,直接渲染的jquery写的传统页面. 这次想偷懒,直接script引入vue,发现渲染不出data值. 渲染引擎用得是xtpl, 找了半天没有发现可以修改xtpl渲染分隔符的配置 ...

  3. vue.js与后台模板引擎“双花括号”冲突时的解决办法

    后台渲染模板如swig,也使用“{{ }}“作为渲染,与前端vue的产生冲突,此时只要在新建Vue对象时,添加delimiters: ['${', '}'],就搞定了,代码如下 <!DOCTYP ...

  4. swig和angular双花括号的冲突

    swig和angular都用{{name}}来作为模板中变量的取值, 那么要共用的话怎么办: {% raw %}{{ foobar }}{% endraw %} 或者 config(['$interp ...

  5. 怎么通过django模板输出双花括号{{}}

    https://segmentfault.com/q/1010000000685399

  6. Vue基础系列（三）——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  7. vue 基础-->进阶 教程(1): 基础（数据绑定）

    第一章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  8. 关于vue的一些总结

    最近学习了一段时间的vue js   除了路由没用过之外  基本上其他的都用过了 对于vue的一些用法  在此做一个总结.  开始使用vue之前 需要导入vuejs这个文件到项目中 <scrip ...

  9. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

随机推荐

  1. 面向切面编程 AOP 和装饰器？？

    1.AOP概念:面向切面编程,指扩展功能不修改源代码,将功能代码从业务逻辑代码中分离出来. 主要功能:日志记录,性能统计,安全控制,事务处理,异常处理等等. 主要意图:将日志记录,性能统计,安全控制, ...

  2. usleep和sleep

    usleep 和 sleep 都是用于将进程挂起, 所不同的是前者在微秒级别, 后者在秒级别.

  3. java SSM框架 代码生成器 快速开发平台 websocket即时通讯 shiro redis

    A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 , ...

  4. 奇葩问题：Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey

    使用mybatis,遇到Invalid bound statement (not found): cn.zss.zsdemo.mapper.RoleMapper.selectByPrimaryKey ...

  5. vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式

    进入正题 1. PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template> <div> &l ...

  6. Java JNA （四）—— void**、void*、char**、char*、int*等类型映射关系及简单示例

    ByReference类有很多子类,这些类都非常有用. ByteByReference.DoubleByReference.FloatByReference. IntByReference.LongB ...

  7. 如何官网下载chrome谷歌浏览器离线安装包

    目录 1. 下载步骤 2. 将语言更改为中文 3. 插件 3.1. chrome 网上应用店 3.1.1. google-access-helper 4. 更新失败 1. 下载步骤 注意 需要梯子才能 ...

  8. C# 异常处理最佳实践，解决代码分析提示CA1031：不要捕捉一般异常类型的解决办法

    异常类型 异常一般分为系统异常 和 应用异常.系统异常有无法连接数据库,而应用异常是业务逻辑异常,比如授权失败. 在 C# 中异常基于 System.Exception,派生出 System.Syst ...

  9. 【改】DOS文件格式转UNIX文件格式

    windows中的文本文件的换行符是"\r\n",而linux中是"\n",dos格式文件传输到unix系统时,会在每行的结尾多一个^M,当然也有可能看不到,但 ...

  10. MYSQL学习笔记——连接以及存储过程

    连接 当我们需要从多个表查询数据时,我们就需要使用到连接操作,mysql支持内连接,左连接以及右连接三种连接方式. 数据库准备 首先我们创建两个表t1, t2: create table t1(i1 ...