vue基础之data存储数据及v-for循环用法示例


Posted in Javascript onMarch 08, 2019

本文实例讲述了vue data存储数据及v-for循环用法。分享给大家供大家参考,具体如下:

vue data里面存储数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue data里面存储数据</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'body',
        data:{
          msg:'welcome vue',
          msg2:12,
          msg3:true,
          arr:['apple','banana','orange','pear'],
          json:{a:'apple',b:'banana',c:'orange'}
        }
      });
    };
  </script>
</head>
<body>
  <input type="text" v-model="msg">
  <input type="text" v-model="msg">
  <br>
  {{msg}}
  <br>
  {{msg2}}
  <br>
  {{msg3}}
  <br>
  {{arr}}
  <br>
  {{json}}
</body>
</html>

vue基础之data存储数据及v-for循环用法示例

vue v-for循环

v-for循环:

v-for="name in arr"
{{value}} {{$index}}

v-for="name in json"
{{value}} {{index}} {{index}} {{key}}

v-for="(k,v) in json"
{{k}} {{v}} {{index}} {{index}} {{key}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com vue v-for循环</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
  <script>
    window.onload=function(){
      new Vue({
        el:'#box',
        data:{
          arr:['apple','banana','orange','pear'],
          json:{a:'apple',b:'banana',c:'orange'}
        }
      });
    };
  </script>
</head>
<body>
  <div id="box">
    <ul>
      <li v-for="value in arr">
        {{value}}  {{$index}}
      </li>
    </ul>
    <hr>
    <ul>
      <li v-for="value in json">
        {{value}}  {{$index}} {{$key}}
      </li>
    </ul>
    <hr>
    <ul>
      <li v-for="(k,v) in json">
        {{k}}  {{v}}  {{$index}} {{$key}}
      </li>
    </ul>
  </div>
</body>
</html>

vue基础之data存储数据及v-for循环用法示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
文件上传插件SWFUpload的使用指南
Nov 29 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
vue-dialog的弹出层组件
May 25 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 #Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 #Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 #Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 #Javascript
Javascript之高级数组API的使用实例
Mar 08 #Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 #Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 #Javascript
You might like
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
js实现鼠标跟随运动效果
2020/08/02 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Django实现网页分页功能
2019/10/31 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
生产总经理岗位职责
2013/12/19 职场文书
装配出错检讨书
2014/09/23 职场文书
2014年团工作总结
2014/11/27 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
Go语言编译原理之源码调试
2022/08/05 Golang