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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Vue常用指令详解分析
Aug 19 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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不用正则验证真假身份证
2013/11/06 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python解析html开发库pyquery使用方法
2014/02/07 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
Python实现八大排序算法
2016/08/13 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
python实现祝福弹窗效果
2019/04/07 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python实现堆排序的实例讲解
2020/02/21 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
导游词之麻姑仙境
2019/11/18 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
以下牛机,你有几个
2022/04/05 无线电
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript