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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
Javascript typeof 用法
Dec 28 Javascript
JavaScript 乱码问题
Aug 06 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jQuery简单实现彩色云标签效果示例
Aug 01 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
php获取文件大小的方法
2014/02/26 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
JavaScript常用数学函数用法示例
2018/05/14 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
[46:58]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第一场 12.17
2020/12/19 DOTA
Python入门篇之条件、循环
2014/10/17 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
应用外语系自荐信
2014/06/26 职场文书
思想工作总结范文
2015/08/12 职场文书