脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → v for v model

VUE中v-model和v-for指令详解

 更新时间：2017年06月23日 14:31:54   作者：学习笔记666  
本篇文章主要介绍了VUE中v-model和v-for指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

1.基本雏形

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    {{msg}}
  </div>
</body>
</html>

需要new一个Vue实例，实例化的时候传入了一个对象{el:'#box',data:{msg:'Hello Vue!'}}。这个意思是：Vue这个只控制id="box"这个DIV元素，同时在 HTML模板上使用双花括号{{xxxx}}语法，来访问data中定义的数据。

上面代码我们new处理一个Vue的实例，并赋值给了vm变量，通过这个vm变量，我们也可以访问其中定义的数据：

      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });

      console.log(vm.msg); //'Hello Vue!'

2.v-model指令

所谓的“指令”其实就是扩展了HTML标签功能(属性)。

v-model的双向数据绑定

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg"/><br/>
    {{msg}} 
  </div>
</body>
</html>

通过v-model 指令，我们把msg 数据绑定到了input文本框，我们修改文本框的值，发现msg 数据改变了。

这里写图片描述

注意：如果我们定义的数据是数组或者json，在模板上会怎样显示出来呢？

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!',
          arr:['apple','banana','orange'],
          json:{a:'apple',b:'banana'}
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg"/><br/>
    {{msg}} <br/>
    {{arr}} <br/>
    {{json}}

  </div>
</body>
</html>

数组和json都被当作字符串输出了，显然这不是我们理想的效果。

这里写图片描述 

3.v-for指令

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>

  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          arr:['apple','banana','orange'],
          json:{a:'apple',b:'banana'}
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <p>循环数组</p>
    <ul>
      <li v-for="a in arr">
      {{a}}
      </li>
    </ul>
    <hr>
    <p>循环出数组索引</p>
    <ul>
      <li v-for="(v,k) in arr">
      {{v}}==>{{k}}
    </ul>
    <p>循环json</p>
    <ul>
      <li v-for="item in json">{{item}}</li>
    </ul>
    <p>循环json的键</p>
    <ul>
      <li v-for="(k,v) in json">
      {{k}}==>{{v}}
      </li>
    </ul>
  </div>
</body>
</html>

这里写图片描述

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue 路由传参加密的示例代码

    Vue 路由传参加密的示例代码

    这篇文章主要介绍了Vue 路由传参加密,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • Vue配置代理(devServer)解决跨域问题

    Vue配置代理(devServer)解决跨域问题

    这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • 详解vue组件开发脚手架

    详解vue组件开发脚手架

    本篇文章给大家详细分析了vue组件开发脚手架的相关内容以及知识点，对此有兴趣的朋友可以学习参考下。
    2018-06-06
  • Vue如何基于vue-i18n实现多国语言兼容

    Vue如何基于vue-i18n实现多国语言兼容

    这篇文章主要介绍了Vue如何基于vue-i18n实现多国语言兼容,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue使用动态组件手写Router View实现示例

    vue使用动态组件手写Router View实现示例

    这篇文章主要为大家介绍了vue使用动态组件手写RouterView实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • Vue.js暴露方法给WebView的使用操作

    Vue.js暴露方法给WebView的使用操作

    这篇文章主要介绍了Vue.js暴露方法给WebView的使用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue之带参数跳转打开新页面、新窗口

    vue之带参数跳转打开新页面、新窗口

    这篇文章主要介绍了vue之带参数跳转打开新页面、新窗口方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue使用konva实现一个简便的流程图

    Vue使用konva实现一个简便的流程图

    日常开发中我们可能碰到流程图的需求,实现流程图的库有很多,如果我们想要实现一个简便的流程图可以使用konva库来实现,下面我们就来看一下具体的实现过程,需要的朋友可以参考下
    2023-08-08
  • 详解Vuex管理登录状态

    详解Vuex管理登录状态

    这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Nuxt.js 静态资源和打包的操作

    Nuxt.js 静态资源和打包的操作

    这篇文章主要介绍了Nuxt.js 静态资源和打包的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论