编程 Javascript

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 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程序设计有所帮助。

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

- Author -

白杨-M

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery json 实例代码

Dec 02 Javascript

基于jquery的表头固定的若干方法

Jan 27 Javascript

JavaScript获取客户端计算机硬件及系统等信息的方法

Jan 02 Javascript

JavaScript定时显示广告代码分享

Mar 02 Javascript

javascript学习总结之js使用技巧

Sep 02 Javascript

js动态添加的DIV中的onclick事件简单实例

Jul 25 Javascript

Angular4如何自定义首屏的加载动画详解

Jul 26 Javascript

canvas+gif.js打造自己的数字雨头像的示例代码

Oct 26 Javascript

Vue插件打包与发布的方法示例

Aug 20 Javascript

JavaScript封装的常用工具类库bee.js用法详解【经典类库】

Sep 03 Javascript

vue限制输入框只能输入8位整数和2位小数的代码

Nov 06 Javascript

vue 遮罩层阻止默认滚动事件操作

Jul 28 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