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


Posted in Javascript onJune 23, 2017

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 数据改变了。

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

注意:如果我们定义的数据是数组或者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都被当作字符串输出了,显然这不是我们理想的效果。

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

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中v-model和v-for指令详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中的常用事件总结
Dec 27 Javascript
javascript 事件绑定问题
Jan 01 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
实例浅析js的this
Dec 11 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
js中的事件委托或是事件代理使用详解
Jun 23 #Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 #Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 #Javascript
微信小程序组件 marquee实例详解
Jun 23 #Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 #Javascript
vue数据双向绑定的注意点
Jun 23 #Javascript
You might like
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
浅谈JavaScript中面向对象技术的模拟
2006/09/25 Javascript
javascript与webservice的通信实现代码
2010/12/25 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
详解Python多线程
2016/11/14 Python
python实现简单flappy bird
2018/12/24 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
结婚典礼证婚词
2014/01/08 职场文书
学校安全检查制度
2014/01/27 职场文书
我的求职择业计划书
2014/04/04 职场文书
淘宝店策划方案
2014/06/07 职场文书
投标承诺函范文
2015/01/21 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL