<!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. java_第一年_JDBC（5）

    事务概念:事务指逻辑上的一组操作,组成这组操作的各个单元,要不全部成功,要不全部不成功: 开始事务:start transaction 提交事务:commit 回滚事务:rollback 事务的四大特 ...

  2. [2019杭电多校第十场][hdu6701]Make Rounddog Happy

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6701 题目大意为求满足 $max(a_{l},a_{l+1}\cdot \cdot \cdot a_{ ...

  3. [APIO 2010] [LOJ 3144] 奇怪装置 (数学)

    [APIO 2010] [LOJ 3144] 奇怪装置 (数学) 题面 略 分析 考虑t1,t2时刻坐标相同的条件 \[\begin{cases} t_1+\lfloor \frac{t_1}{B} ...

  4. [SheetJS] js-xlsx模块学习指南

    简介 SheetJS是前端操作Excel以及类似的二维表的最佳选择之一,而js-xlsx是它的社区版本. js-xlsx将注意力集中到了数据转换和导出上,所以它支持相当多种类的数据解析和导出.不仅仅局 ...

  5. 【记录】java解析xml文件

    最近新需求要解析xml格式的日志文件,解析完之后数据库落地. 经过度娘搜索,写了demo,现记录如下: 测试XML <?xml version="1.0" encoding= ...

  6. python面向对象的三大特征--继承子类调用父类方法

    #在子类中调用父类方法 class Vehicle: country="China" def __init__(self,name,speed,load,power): self. ...

  7. 切面AOP的切点@Pointcut用法

    格式: execution(modifiers-pattern? ret-type-pattern declaring-type-pattern? name-pattern(param-pattern ...

  8. [sqlmap源码阅读] 数据库识别

    通过网页返回的数据库错误信息识别网站所有数据库类型,用到的正则表达式及支持识别的数据库类型,这些信息以xml文件的形式存在,使用 sax 解析xml.

  9. image按钮新增的width属性和height属性

    代码实例: test.html <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  10. 【串线篇】spring boot自动配置原理

    配置文件到底能写什么?怎么写?自动配置原理: 配置文件能配置的属性参照 一.自动配置原理: 1.1.SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfigur ...