Vue中的循环及修改差值表达式的方法


Posted in Javascript onAugust 29, 2019

一.Vue中的循环

v-for

常见的4总情况

#第一种
<div v-for="item in items"></div>

#第二种
<div v-for="(item, index) in items"></div>

#第三种
<div v-for="(val, key) in object"></div>

#第四种
<div v-for="(val, name, index) in object"></div>

正对于对象为字典,如果是普通的列表数组类型的index为空

二.Vue中的分隔符(修改差值表达式)

delimiters

举个例子

<div id="app">
  [[ msg }}
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      msg: 'message'
    },
    // 修改插值表达式符号
    delimiters: ['[[', '}}'],  两边符号用'符号' 差值的内容`, `来表示
  })
</script>

总结

以上所述是小编给大家介绍的Vue中的循环及修改差值表达式的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
浅谈node的事件机制
Oct 09 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue父子组件通信的高级用法示例
Aug 29 #Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 #Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
You might like
教你如何使用php session
2013/10/28 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
小程序实现多列选择器
2019/02/15 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
python实现的简单猜数字游戏
2015/04/04 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python实现简易动态时钟
2018/11/19 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
高中生第一学年自我鉴定2015
2014/09/28 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年电教工作总结
2015/05/26 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
浅谈Web Storage API的使用
2021/06/23 Javascript
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL