vue双花括号的使用方法 附练习题


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了vue双花括号的具体代码,供大家参考,具体内容如下

<!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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
vue组件生命周期详解
Nov 07 #Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
vue组件watch属性实例讲解
Nov 07 #Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 #Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
Symfony2创建页面实例详解
2016/03/18 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
微信小程序radio组件使用详解
2018/01/31 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue实现微信分享功能
2018/11/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
说一说Python logging
2016/04/15 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
儿童编程python入门
2018/05/08 Python
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
基于Python的PIL库学习详解
2019/05/10 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python 伯努利分布详解
2020/02/25 Python
如何理解python对象
2020/06/21 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
几个SQL的面试题
2014/03/08 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
分公司任命书
2014/06/06 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
天下第一关导游词
2015/02/06 职场文书
2015年助残日活动总结
2015/03/27 职场文书
师德承诺书2015
2015/04/28 职场文书