vue v-for的数组改变导致页面不渲染解决方法

摘要:
直接在数组中,更改数组以实现重新呈现页面的目的。您需要使用数组方法,如push或$set(),或重新分配数组以更改数组引用地址,但直接index={item.name}}{item.age}

直接在数组里,改变数组来达到重新渲染页面的目的,

需要用push等数组方法,

或者$set(),或者给数组重新赋值,来改变数组引用地址

而是直接索引=

<body>
    <div id="app">
     <li v-for='item in students'>
         <span>{{ item.name }}</span>
         <span>{{ item.age }}</span>
     </li>
       <button @click='addStudent'>click</button>
<button @click='$set(students,3,{name:"xioaming",age:102333})'>click</button>
<button @click='Vue.set(students,3,{name:"xioaming",age:102333})'>click</button>
    </div>
    <script src="http://t.zoukankan.com/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                students: [
                    {name:"xioaming",age:10},
                    {name:"xioaming",age:101},
                    {name:"xioaming",age:102}
                ]
            },
            methods: {
                addStudent: function(){
                   this.students[3] =   {name:"xioaming",age:102333}//这样不能重新渲染页面
this.students.push(
{name:"xioaming",age:102333})
} } })
</script>

vue v-for的数组改变导致页面不渲染解决方法第1张

免责声明:文章转载自《vue v-for的数组改变导致页面不渲染解决方法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇zTree API中刷新树没效果国密证书生成实践下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

WPF知识点全攻略11- 命令(Command)

先看一下命令的简单使用: <Window.CommandBindings> <CommandBinding Command="ApplicationCommands.Cut" CanExecute="CutCommand_CanExecute" Executed="CutCommand_Executed" />...

[HTML5]WAI-ARIA介绍

认识ARIA 目前互联网应用日益增强,其中大部分是通过混合技术(AJAX、DHTML、JavaScript 和 SVG)创建或自定义一些模拟桌面GUI程序的的 Web widget 小组件来增强 Web 应用程序的交互,但部分类似Dialog 的对话框、弹出层,模拟select 的下拉菜单等小组件并没能提供所需的语义作支持,残障人士有可能无法读懂当前信息。...

动态菜单/权限管理的实现效果(数据前提:须做好 菜单、按钮、角色、用户等相关功能)

菜单管理 1.通过点击左侧树形某一项,右侧表格中出现对应菜单数据 2.实现菜单的增删改查功能——增改功能有树形下拉列表功能 3.列表数据——可排序、可下载excel、可自定义列      按钮管理 1. 通过点击左侧树形某一项,右侧表格中出现对应按钮数据 2.实现了按钮的增删改查功能——增改功能有树形下拉列表功能 3.列表数据——可排序、可下载excel...

Vue 计数器

首先.我们先导入vue插件: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  然后建立一个<div> <div id="app"> <button>-</button>...

缓冲器的学习

导语 缓冲器的设计的是新IO模型中最基础的一部分。因为新IO模型中要求所有的IO操作都需要进行缓冲。在新的IO模型中,不再向输出流写入数据和从数据流中读取数据了,而是要从缓冲区中读写数据。缓冲区可是是数组,也可以是与硬件或内存直接连接。 从编程的角度来看,流和通道之间的关键区别子在于流是基于字节的,而通道是基于块的。流设计为按顺序一字节接一字节地传输数据。...

Java数组与vector互转

Java数组与vector互转 /*Object[] object1 = null ; //数组定义 Vector<Object> object2;//Vector定义 object2 = new Vector<Object>(Arrays.asList(object1));// array -> vector object1...