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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
Dec 03 Javascript
window.location.hash 使用说明
Nov 08 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
浅谈Fetch 数据交互方式
Dec 20 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
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php中的观察者模式
2010/03/24 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python reversed函数及使用方法解析
2020/03/17 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
感恩节红领巾广播稿
2014/02/11 职场文书
甜品店创业计划书
2014/08/14 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis