<!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. Numerical Sequence (easy version)

    http://codeforces.com/problemset/problem/1216/E1 E1. Numerical Sequence (easy version) time limit pe ...

  2. 本地部署 Misago Docker + 配置 HTTPS 笔记

    最近答应帮朋友做个论坛网站,想借此机会捡起 Python 在 GitHub 找了一圈,打算借用以 Python+Django 开发的 Misago 这个论坛系统 由于作者在今年更新的 Misago 0 ...

  3. CVE-2016-0822-MTK-drivers/misc/mediatek/connectivity/common/combo/linux/wmt_dev.c#1158

    CVE-2016-0822-MTK-drivers/misc/mediatek/connectivity/common/combo/linux/wmt_dev.c#1158 //mediatek/ke ...

  4. Knight Moves （双向bfs）

    # 10028. 「一本通 1.4 例 3」Knight Moves [题目描述] 编写一个程序,计算一个骑士从棋盘上的一个格子到另一个格子所需的最小步数.骑士一步可以移动到的位置由下图给出. [算法 ...

  5. ASE Alpha Sprint - backend scrum 2

    本次scrum于2019.11.5再sky garden进行,持续30分钟. 参与人: Zhikai Chen, Jia Ning, Haifeng Chen, Hao Wang 请假: Xin Ka ...

  6. Python在线IDE | 谷歌Colaboratory云端IDE介绍

    目录 1. 推荐阅读 2. 本文地址 3. 按 4. 使用篇 6. 教学篇 1. 推荐阅读 Python基础入门一文通 | Python2 与Python3及VSCode下载和安装.PyCharm破解 ...

  7. OGG replicat复制进程的拆分

    参考资料: 1.https://blog.csdn.net/datingting1/article/details/79583690

  8. windows系统如何查看物理cpu核数，内存型号等

    首先,我们需要打开命令行模式,利用win+r键打开运行,输入cmd回车即会出现   然后在命令行界面输入wmic进入命令行系统管理执行脚本界面     然后我们通过cpu get *可以查看cpu的具 ...

  9. Linux内核设计与实现 总结笔记（第五章）系统调用

    系统调用 内核提供了用户进程和内核交互的接口,使得应用程序可以受限制的访问硬件设备. 提供这些接口主要是为了保证系统稳定可靠,避免应用程序恣意妄行. 一.内核通信 系统调用在用户空间进程和硬件设备之间 ...

  10. [USACO17FEB]Why Did the Cow Cross the Road III G (树状数组,排序)

    题目链接 Solution 二维偏序问题. 现将所有点按照左端点排序,如此以来从左至右便满足了 \(a_i<a_j\) . 接下来对于任意一个点 \(j\) ,其之前的所有节点都满足 \(a_i ...