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 相关文章推荐
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
微信小程序日历组件calendar详解及实例
Jun 08 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
详解Vue中watch的高级用法
May 02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
JS实现判断有效的数独算法示例
Feb 25 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 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
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
js对象基础实例分析
2015/01/13 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
Javascript removeChild()删除节点及删除子节点的方法
2015/12/27 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
原生JS实现留言板
2020/03/26 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
python PIL模块与随机生成中文验证码
2016/02/27 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
巴西网上药房:onofre
2016/11/21 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
入党转预备思想汇报
2014/01/07 职场文书
小学教研工作制度
2014/01/15 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
三方协议书范本
2014/04/22 职场文书
农村文化活动总结
2014/08/28 职场文书
沈阳故宫导游词
2015/01/31 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
Golang 并发编程 SingleFlight模式
2022/04/26 Golang