Vue.js2.0中的变化小结
2017-10-24 11:40
796 查看
最近自己在学习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中的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue.js学习:1.0到2.0的变化(区别)
- Vue.js 1.x 和 2.0 实例的生命周期的变化
- vue.js 2.0的一些变化(一、基本API)
- vue.js 1.x与2.0中js实时监听input值的变化
- 双重监听俩个值的变化 vue2.0 -- 飞机票项目
- Vue.js 2.0 由浅入深,第五天 day05
- Vue.js高仿饿了么外卖App 前端框架Vue.js 1.0升级2.0
- vue.js 2.0父子组件学习入门套路
- 基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this
- Rubik UI 是一个基于 Vue.js 2.0
- Vue.js2.0 入门实例
- Vue.js基础(2.0+)
- vue2.0使用weui.js的uploader组件上传图片
- flask 与 vue.js 2.0 实现 todo list
- vue.js2.0 自定义组件初体验
- 基于Vue.js 2.0实现百度搜索框效果
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
- vue.js 2.0系列之 引入Elemrent UI
- vue2.0的组件联合变化