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 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
seaJs的模块定义和模块加载浅析
Jun 06 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
angularjs性能优化的方法
Sep 05 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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
php下连接mssql2005的代码
2011/01/17 PHP
PHP备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
Vue-cli3多页面配置详解
2020/03/22 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
Python运算符重载用法实例
2015/05/28 Python
Django中处理出错页面的方法
2015/07/15 Python
python @property的用法及含义全面解析
2018/02/01 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
对Python _取log的几种方式小结
2019/07/25 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Python中关于浮点数的冷知识
2019/09/22 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
html5的localstorage详解
2017/05/09 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
金融事务专业求职信
2014/04/25 职场文书
优秀团干部个人事迹
2014/05/29 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
2015年林业工作总结
2015/05/14 职场文书
酒店宣传语大全
2015/07/13 职场文书
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers