删除的vue怎么找回_vue2.0移除或更改的一些东西(移除index key)

爱被打了一巴掌 2022-12-31 09:27 115阅读 0赞

一、vue2.0移除了$index和$key

虽然说现在很多文章说他们的代码是vue2.0版本的，但是有一些仔细一看，发现并不全是2.0版本，有些语法还是1.0的版本，比如这个$index,$key，这两个压根就不是2.0的写法，2.0早就把这两个给删除了，我们先来看看之前的列表渲染是怎么写的

*  \{ \{$index\}\}--\{ \{$key\}\}

export default \{

data()\{

return\{

list:\['姓名','性别','年龄','语文','数学','英语','总分'\]

这种写法在2.0的环境下虽然可以运行

![Image 1][]

但是在控制台却出错了

![Image 1][]

$index和$key没有定义，而且在页面上也没有渲染出这两个东西的效果，$index是索引，$key是键值

![Image 1][]

在vue2.0中，这种写法改为了

*  \{ \{index\}\}--\{ \{item\}\}

得到的页面效果如下

![Image 1][]

当然，这个问题有很多人写博客提到过，我这里就汇总一下

二、$refs和$els

我在vue2.8.2的版本下使用$refs和$els获取元素的时候，出现了一些问题，当然可能不止是2.8.2版本，其他的版本我还没试过，如果有跟我相同的问题的话可以试试看这种方法。我们先来使用$els

测试

export default \{

methods:\{

getElement()\{

let element=this.$els.vT

console.log(element)

v-el用横杠写法，在用$els的时候用驼峰写法，我在2.8.2版本的vue环境下是获取不了的

![Image 1][]

我们再来使用$refs获取元素节点，我们先用这种方法试试看

测试

export default \{

methods:\{

getElement()\{

let element=this.$refs.vt

console.log(element)

这种方法是可以获取到的

![Image 1][]

接下来我们试试看这种写法

测试

export default \{

methods:\{

getElement()\{

let element=this.$refs\['v-t'\]

console.log(element)

也是可以获取得到class为v-t的元素

![Image 1][]

关于ref注册时间的重要说明: 因为ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模版中做数据绑定。----引用自vue.js官方文档

三、transition

Vue 提供了 transition 的封装组件，比如我们现在要实现一种效果：点击一个按钮之后，缓慢出现一个有背景颜色的div，点击div里面的关闭按钮之后，div缓慢消失。有一种写法是这样的

开启

关闭

export default \{

data()\{

return\{

tf:false

\},

methods:\{

show()\{

this.tf=true

\},

hide()\{

this.tf=false

.box\{

width:177px;

height:177px;

transition:all 0.5s

.fade-transition\{

opacity:1;

background:rgba(7,17,27,0.8);

.fade-enter,.fade-leave\{

opacity:0;

background:rgba(7,17,27,0);

这种写法在有些版本运行是有效果的，但是在2.8.0版本下却没有效果，点击开启按钮之后只出现一个关闭按钮，现在我们更改一下写法

开启

关闭

export default \{

data()\{

return\{

tf:false

\},

methods:\{

show()\{

this.tf=true

\},

hide()\{

this.tf=false

.box\{

width:177px;

height:177px;

background:rgba(7,17,27,0.8);

.v-enter-active,.v-leave-active\{

transition: opacity 0.5s

.v-enter,.v-leave-to\{

opacity: 0

这种写法就有效果了，这是根据官方文档写的，实现之后效果是这样的

![Image 1][]

四、结语

这是我最近学习遇到的一些小问题，有时候看视频，别人写的代码照着敲，我们敲完之后可能都还运行不了，这时候有可能是版本问题，框架更新了，语法不一样了等等。现在一些框架更新太快了，对我们这些码农来说确实挺考验的。

[Image 1]:

删除的vue怎么找回_vue2.0移除或更改的一些东西(移除index key)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关移除元素

相关删除的vue怎么找回_vue2.0移除或更改的一些东西(移除index key)

相关 vue鼠标移入移除带动画事件实例

相关 Vue-监听事件、移除事件（节流处理）

相关 546. 移除盒子

相关 php7移除的一些函数

相关 vue项目中一键移除项目的jquery

相关 vue 移除严格模式

相关移除元素

相关 vue 中$index $key 已移除