<!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. <meta>标签中http-equiv属性的属性值X-UA-Compatible详解

    X-UA-Compatible是针对IE8新加的一个设置,对于IE8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含<!DOCTYPE> ...

  2. CopyOnWriteArrayList详解

    可以提前读这篇文章:多读少写的场景 如何提高性能 写入时复制(CopyOnWrite)思想 写入时复制(CopyOnWrite,简称COW)思想是计算机程序设计领域中的一种优化策略.其核心思想是,如果 ...

  3. 搜索---BFS

    搜索   深度优先搜索和广度优先搜索广泛的应用于树和图中,但是他们的应用远不止于此. BFS   广度优先搜索一层一层地进行遍历,每层遍历都是以上一层遍历的结果作为起点,遍历一个距离能访问到的所有节点 ...

  4. Qt Creator 不能输入中文怎么解决？

    Qt Creator 2.7.2不能输入中文怎么解决?之前提的问题自己后来找到解决方法后就忘了, 方法很简单,只要设置一下环境变量就行了export QT_IM_MODULE=ibus qt5.4.r ...

  5. python面向对象--类的内置函数

    #isinstance(obj,cls)判断obj是否是类cls的实例 #issubclass(cls,cls1)判断cls是否是cls1的子类或派生类 class Foo: pass class B ...

  6. 12JSP进阶

    1.EL表达式 1.1 简介 EL表达式替代jsp表达式.因为开发jsp页面的时候遵守原则:在jsp页面中尽量少些甚至不写java代码. EL表达式作用:向浏览器输出域对象中的变量或表达式计算的结果 ...

  7. 去掉Tomcat网站地址栏的小猫图标

    当我们打开CSDN等网站时,在地址栏前面就会出现红色的C状图标,如果在桌面新建此链接的快捷方式,则桌面图标也自动变为该地址栏ICO图标.在基于TOMCAT的BS应用或网站开发时,默认的图标为黄色的小猫 ...

  8. ivew 限制输入 0 到 1 的数字 包括小数， 0 ，1

    input <FormItem label="> <Input v-model="formItem.shapeDifferen.breastScaleOutSpa ...

  9. Centos 的防火墙（firewalld，iptables）

    Centos系统防火墙介绍 概述: 1.Filewalld(动态防火墙)作为redhat7系统中变更对于netfilter内核模块的管理工具: 2.iptables service 管理防火墙规则的模 ...

  10. a[b]和b[a]区别

    #include <stdio.h> main() { char a[5] = "abcd"; int b = 3; printf("%c\n",a ...