<!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. 本地SVN服务器的搭建（WINDOWS环境）

    1.下载安装 VISUALSVN SERVER 1.1下载地址:https://www.visualsvn.com/server/download/ 1.2下载完成后,双击安装. 2.下载安装 Tor ...

  2. 使用OFBIZ的理由和不使用OFBIZ的理由

    1 使用OFBIZ的理由 1.1 什么是OFBIZ OFBIZ是由Sourceforge维护的一个最著名的开源项目之一,提供创建基于最新J2EE/XML规范和技术标准,构建大型企业级.跨平台.跨数据库 ...

  3. 搜索（BFS）---最短单词路径

    最短单词路径 127. Word Ladder (Medium) Input: beginWord = "hit", endWord = "cog", word ...

  4. spark复习笔记(5):API分析

    0.spark是基于hadoop的mr模型,扩展了MR,高效实用MR模型,内存型集群计算,提高了app处理速度. 1.特点:(1)在内存中存储中间结果 (2)支持多种语言:java scala pyt ...

  5. Python之路-函数基础&局部变量与全局变量&匿名函数&递归函数&高阶函数

    一.函数的定义与调用 函数:组织好的.可重复使用的.用户实现单一或者关联功能的代码段.函数能够提高应用的模块性和代码的重复利用率.Python提供了很多内置的函数,比如len等等,另外也可以根据自己的 ...

  6. HBase HA分布式集群搭建

    HBase HA分布式集群搭建部署———集群架构 搭建之前建议先学习好HBase基本构架原理:https://www.cnblogs.com/lyywj170403/p/9203012.html 集群 ...

  7. R语言data.table包fread读取数据

    R语言处理大规模数据速度不算快,通过安装其他包比如data.table可以提升读取处理速度. 案例,分别用read.csv和data.table包的fread函数读取一个1.67万行.230列的表格数 ...

  8. CA认证机制的简明解释

    公钥机制面临的问题: 假冒身份发布公钥! 可以用CA来认证公钥的身份.CA有点像公安局,公钥就像身份证.公安局可以向任何合法用户颁发身份证以证明其合法身份.第三方只要识别身份证的真伪就能判断身份证持有 ...

  9. Codeforces Round #421 (Div. 2) - A

    题目链接:http://codeforces.com/contest/820/problem/A 题意:一个人在看一本书,书一共C页,这个人每天看v0页,但是他又开始加速看这本书,每天都比前一天多看a ...

  10. 记录卸载5.7版本MySQL并安装5.6版本MySQL

    新版本有些问题很烦,也没时间去找解决办法,只好用回5.6,首先卸载6.7的MySQL: sudo apt-get autoremove --purge mysql-server-* apt remov ...