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 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
Jun 02 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
使用Cargo工具高效创建Rust项目
Aug 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue中实现高德定位功能
2019/12/03 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
JS删除对象中某一属性案例详解
2020/09/08 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
后勤岗位职责
2013/11/26 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
十八大标语口号
2014/10/09 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
高中运动会前导词
2015/07/20 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
教你用Python matplotlib库制作简单的动画
2021/06/11 Python