vue学习（九） set用法

迈不过友情╰ 2022-04-22 11:38 108阅读 0赞

1，示例代码

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;div v-for="(item,index) of list" :key="item.id"&gt;
            {
       {item.id}}
        &lt;/div&gt;

&lt;div v-for="(item,key,index) of userInfo"&gt;
            {
       {item}}  --- {
       {key}}  ---{
       {index}}
        &lt;/div&gt;

&lt;/div&gt;

&lt;script&gt;
        //Vue.set(app.list,1,{id:'003',name:'hhhh'})
        //app.$set(app.list,0,{id:'004',name:'ahshhs'})
        //Vue.set(app.userInfo,'sex','男')
        //app.$set(app.userInfo,'phone','12345678')
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                list:[{
                    id:"001",
                    name:'zhangsan'
                },{
                    id:'002',
                    name:'lisi'
                }],
                userInfo:{
                    id:'123',
                    name:'zhangsnah',
                    age:29,
                    address:'shanghai'
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

2，在控制台输入

Vue.set(app.list,1,\{id:'003',name:'hhhh'\})

//app.$set(app.list,0,\{id:'004',name:'ahshhs'\})

Vue.set(app.userInfo,'sex','男')

//app.$set(app.userInfo,'phone','12345678')

页面会及时更新

3，操作数组有7中方法

push  pop shift unshift  splice  sort reverse

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

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

相关阅读

相关 Spring学习(二十九)-ApplicationListener用法

ApplicationListener：监听容器中发布的事件。事件驱动模型开发；源码： //监听 ApplicationEvent 及其下面的子事件

ゞ浴缸里的玫瑰/ 2024年02月19日 16:11/ 0 赞/ 45 阅读

相关 vue中this.$set()的用法

1、this.$set()的作用 > 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 this.$set()用于向响应式对象上添加新属性，因

墨蓝/ 2023年09月24日 13:01/ 0 赞/ 115 阅读

相关 set_new_handler用法

分配内存时，如果每次new出来，都要判断是否成功（地址是否为空），比较繁琐。 c++提供`set_new_handler`，当new失败时，会调用`set_new_han

刺骨的言语ヽ痛彻心扉/ 2022年09月23日 05:49/ 0 赞/ 154 阅读

相关关于set的用法

map的元素都是“实值/键值”所形成的一个对组。每个元素都有一个键，是排序的准则。每个键只能出现一次，不允许重复使用。map可以被视为关联式数组，也就是具有任意索引型别的数组。

男娘i/ 2022年06月14日 00:22/ 0 赞/ 252 阅读

相关 Vue学习笔记九

Vue的过渡效果先来一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta ch

我就是我/ 2022年06月09日 11:54/ 0 赞/ 209 阅读

相关 sqlplus set用法

set heading off等问题2010-09-01 11:03set heading off——不显示每行的列名 set echo off——不重复显示所要执行的sq

矫情吗；*/ 2022年05月22日 04:49/ 0 赞/ 236 阅读

相关 vue 学习（十）ref的用法

1，例子是一个计数器，就是求两个数之和 <table> <tbody> <tr> <td> <pre><!DOCTYPE html> <h

桃扇骨/ 2022年04月22日 11:44/ 0 赞/ 199 阅读

相关 vue学习（九） set用法

1，示例代码 <table> <tbody> <tr> <td> <pre><code><!DOCTYPE html> <html lan

迈不过友情╰/ 2022年04月22日 11:38/ 0 赞/ 109 阅读

相关 sqlplus_set用法

set heading off——不显示每行的列名 set echo off——不重复显示所要执行的sql语句 set line 200——设置每行显示200字符

深碍√TFBOYSˉ_/ 2022年01月16日 22:43/ 0 赞/ 300 阅读

相关 Vue中 this.$set的用法

Vue中this.$set的用法 Vue.set( target, propertyName/index, value ) 参数 \{Object | Array\} t

╰+攻爆jí腚メ/ 2021年09月07日 06:03/ 0 赞/ 664 阅读