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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
Nov 04 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
Vue3 源码导读(推荐)
Oct 14 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 分页类实现代码
2009/12/03 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
基于PHP实现微信小程序客服消息功能
2019/08/12 PHP
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
用Python解数独的方法示例
2019/10/24 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python 初始化一个定长的数组实例
2019/12/02 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
业务员工作态度散漫检讨书
2014/11/02 职场文书
先进典型事迹材料
2014/12/29 职场文书
企业工会工作总结2015
2015/05/13 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
分析MySQL优化 index merge 后引起的死锁
2022/04/19 MySQL
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android