Vue.js2.0中的变化小结


Posted in Javascript onOctober 24, 2017

最近自己在学习Vue.js,在看一些课程的时候可能Vue更新太块了导致课程所讲知识和现在Vue的版本不符,从而报错,我会在以后的帖子持续更新Vue的变化与更新,大家也可以一起交流,共同监督学习!

1.关于Vue中$index获取索引值已经取消,多用于多个元素的操作,像ul中的li,通过v-for来建立多个li,如果对于其中的某个或者一些li操作的话,需要使用到索引值,用法如下;

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <button v-on:click="reverse">点击</button>
  <input v-model="newtodo" v-on:keyup.enter="add">
  <ul>
   <li v-for="(todo,index) in todos">
    <span>{{todo.text}}</span>
    <button v-on:click="remove(index)">删除</button>
   </li>
  </ul>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   todos: [
    {text:'我是一开始就有的哦!'}
   ],
   newtodo: ''
  }
 },
 methods: {
  reverse: function(){
   this.msg = this.msg.split('').reverse().join('')
  },
  add: function(){
   var text = this.newtodo.trim();
   if(text){
    this.todos.push({text:text});
    this.newtodo = ''
   }
  },
  remove: function(index){
   this.todos.splice(index,1)
  }
 }
}
</script>

这是我自己组建的一个片段,重点在于index的使用。

总结

以上所述是小编给大家介绍的Vue.js2.0中的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
js特殊字符转义介绍
Nov 05 Javascript
jquery.post用法示例代码
Jan 03 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 #Javascript
分享vue.js devtools遇到一系列问题
Oct 24 #Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 #Javascript
Vue基于NUXT的SSR详解
Oct 24 #Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 #Javascript
使用js获取伪元素的content实例
Oct 24 #Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 #Javascript
You might like
Home Coffee Roasting
2021/03/03 咖啡文化
php+mysql分页代码详解
2008/03/27 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
Python解释执行原理分析
2014/08/22 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
浙大网新C/C++面试解惑
2015/05/27 面试题
计算机毕业大学生求职信
2014/06/26 职场文书
上班迟到检讨书
2014/09/15 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
三行辞职书范文
2015/02/26 职场文书
观后感格式
2015/06/19 职场文书
python实现简单倒计时功能
2021/04/21 Python
java设计模式--原型模式详解
2021/07/21 Java/Android