时间:2021-05-26
最近自己在学习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中的变化,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue.js2.0实现分页效果的具体代码,供大家参考,具体内容如下vue.js2.0实现的简单分页*{margin:0;padding:0;
这个插件未压缩版本只有7.62kb,很精简,支持img标签和background-img资源的lazyload。支持vue.js1.0和vue.js2.0安转$
如果你在使用vue.js,那么我想你可能会对vue组件之间的通信感到崩溃。我在使用基于vue.js2.0的UI框架ElementUI开发网站的时候,就遇到了这种
使用Vue.js2.0模仿百度搜索框效果,供大家参考,具体内容如下Vue模拟百度搜索body,html{padding:0;margin:0;}#box{mar
Element-UI是饿了么前端团队推出的一款基于Vue.js2.0的桌面端UI框架,手机端有对应框架是MintUI。需求场景如下:指定起止日期,后选的将会受到