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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
javascript实现最长公共子序列实例代码
Feb 05 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
一起深入理解js中的事件对象
Feb 06 Javascript
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
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
2009/08/02 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
javascript天然的迭代器
2010/10/29 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
javascript实现微信分享
2014/12/23 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
js实现3D旋转效果
2020/08/18 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
图文详解WinPE下安装Python
2016/05/17 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
如何在Django项目中引入静态文件
2019/07/26 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
python super()函数的基本使用
2020/09/10 Python
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
小学安全教育材料
2014/02/17 职场文书
数学备课组工作总结
2015/08/12 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Go语言基础map用法及示例详解
2021/11/17 Golang
pandas中关于apply+lambda的应用
2022/02/28 Python