vue中如何给data里面的变量增加属性

目录
  • 给data里面的变量增加属性
    • vue框架是使用mvvm模式
    • 我废话不多说直接上方法了
  • 给data中的响应式对象动态添加属性

给data里面的变量增加属性

vue框架是使用mvvm模式

里面有一种通知机制 如果数据发生了变化 就会通过 视图进行更新

那是不是这样呢 我们只要把vue中data中的值发生变化dom树就会随时更新呢

<div id="app">
            <ul>
                <li v-for="(val,idx) in test">
                    {{val}}
                </li>
            </ul>
            <button @click="add">添加新属性</button>
        </div>
<script>
        var app=new Vue({
            el:"#app",
            data:{
                test:{
                    "a":'test.a',
                }
            }
        })
        console.log(app.test.a);// 可以访问的到
        app.test.a="test.b";
        console.log(app.test.a); // 打印出来 test.b    同时视图也发生了变化
</script>

我们在vue的实例外面访问里面的变量是 可以的

直接  app.test.a  就可以访问到  打印出来 test.a

我们要是在这里直接更改呢 

app.test.a=“test.b”

会发现 视图发生了变化

但是我们要是 在这里给 app.test 增加属性看看还是否可以

       app.test.b="test.c";
        console.log(app.test.b);

最后发现页面上也确实增加了  test.c   这就是vue响应式数据的强大之处

那么我们从 vue实例里面 试试看直接赋值 能不能增加 属性

methods:{
                add:function(){
                    this.test.b="test.c"；     
                   console.log(this.test);
                }
            } 

我在界面上创建一个按钮增加了一个add方法    通过方法调用试试看能不能增加新的属性

打印出来 确实显示 在vue的data 数据中 但实际上并没有在视图中更新

知道的同学 可能了解  vue 的数据双向绑定是 通过数据劫持 结合 订阅者——发布者  通俗点讲就是 那个被我们后来直接加上的属性 没有在 vue的 通知机制机制里面  所以没法享受实时的监听机制

但是在工作的时候 可能需要我们网里面新增 一些数据  并让他和视图实时更新

我废话不多说直接上方法了

1.通过数组操作  

this.test.push({isActive:fasle});  

2.通过全局api $set

this.$set(this.test,"isActive",fasle);

3.通过Object.assign()

this.test=Object.assign({},this.test,{"b":"test.c"})

第一种方法 是我自己填加上去 在一中特殊的情况下 可以使用

给data中的响应式对象动态添加属性

data响应式对象动态添加属性

<template>
  <div>
    名字：{{ peple.name }}<el-button style="margin-left:10px" @click="setSex">点击添加性别</el-button
    ><span style="margin-left:20px" v-if="this.peple.sex"
      >性别：{{ peple.sex }}</span
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      peple: {
        name: "长大"
      }
    };
  },
  methods: {
    setSex() {
      this.$set(this.peple, "sex", "男");
    }
  }
};
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在VUE style中使用data中的变量的方法

    最近项目中的公共组件,在复用的时候,针对不同的场景,需要不断变更CSS里样式的值,而且已经有了全局的公共组件样式了 如果用vue传统的动态绑定class和style的方式去修改样式(文末会提到),需要额外写很多变量和模块class,那如果我的样式的值,可以从父组件,传到子组件,子组件根据传入值去渲染对应样式的值,其实就是要再style中使用data和props中的变量,这要怎么做呢? 其实很简单,只需要三步,大家来看: 1.HTML结构 <Upload ref="upload"

  • vue 实现根据data中的属性值来设置不同的样式

    style动态赋值 margin-top的值 根据choosePaperFlag的值来设置 利用三元表达式 补充知识:vue 条件判断绑定内联样式 当需要判断条件来绑定内联样式时 可以三元运算符判断,然后绑定一个对象 :style="!areaCode || !phoneNumber || !receivedCode || !verification ? '{backgruond:#ccc}' : $store.state.store.config.background" 以上这篇vu

  • Vue.js数据绑定之data属性

    Vue.js数据绑定之data属性

    Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定. data属性 data属性是Vue实例的数据对象,可以绑定的是对象或者是函数. 当数据对象一旦被data绑定就会发生变化,数据对象中的属性会拥有get和set属性,用来监听数据变化,实时响应. Vue实例会代理data绑定对象上的所有属性,即所有属性直接添加到Vue实例化对象中. V

  • 对VUE中的对象添加属性

    背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa

  • vue将对象新增的属性添加到检测序列的方法

    vue中将对象中新增的属性增加到检测序列中 deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1 var key, i if (o2 instanceof Array) { for (i = 0; i < o2.length; i++) { if (o2[i] instanceof Array) { this.$set(o1, i, []) this.deepCopy(o1[i], o2[i]) } else if (o2[i] instanceof Object) {

  • vue中如何给data里面的变量增加属性

    vue中如何给data里面的变量增加属性

    目录 给data里面的变量增加属性 vue框架是使用mvvm模式 我废话不多说直接上方法了 给data中的响应式对象动态添加属性 给data里面的变量增加属性 vue框架是使用mvvm模式 里面有一种通知机制 如果数据发生了变化 就会通过 视图进行更新 那是不是这样呢 我们只要把vue中data中的值发生变化dom树就会随时更新呢 <div id="app">             <ul>                 <li v-for="

  • 基于Vue中this.$options.data()的this指向问题

    目录 this.$options.data()的this指向问题 vue文档中有关于data的指向问题的解释 vue骚操作之this.$options.data() 重置vue组件的data数据 小结一下 this.$options.data()的this指向问题 项目里遇到一个问题,用this.$options.data()重置组件data时报错,原因是因为form里的rule规则采用了this写法. 如下: rules: {         code: [this.$rules.requir

  • vue中定义的data为什么是函数

    目录 一.new Vue场景 二.组件场景 总结 高频面试题:vue中的data为啥是函数? 答案是:是不是一定是函数,得看场景.并且,也无需担心什么时候该将data写为函数还是对象,因为vue内部已经做了处理,并在控制台输出错误信息. 一.new Vue场景 new Vue({ el: "#app", // 方式一:对象 data: { obj: { name: "qb", } }, // 方式二:工厂函数 // data () { // return { //

  • vue中利用simplemde实现markdown编辑器（增加图片上传功能）

    前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

  • vue中如何初始化data数据

    目录 如何初始化data数据 vue程序初始化流程 初始化 改写的原因 流程实现 源码流程 初始化流程 如何初始化data数据 后台管理系统中,新建和编辑使用同一个页面,常常需要初始化data数据. form: { id: 0, name: '', place: '', number: '', admin_uid: '', is_audit: 2, contact: '', sort: '', is_network: 2, network_type: 1, is_projector: 2, is

  • Vue 中为什么不推荐用index 做 key属性值

    Vue 中为什么不推荐用index 做 key属性值

    目录 前言 key 的作用 key 在 diff 算法中的角色 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 最长递增子序列 为什么不要用 index 性能消耗 数据错位 解决方案 总结 前言 前端开发中,只要涉及到列表渲染,那么无论是 React 还是 Vue 框架,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理.那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key

  • vue中data的基础汇总

    vue中data的基础汇总

    目录 vue中如何重置data 组件中的data为什么是一个函数 为什么new Vue里的data可以是一个对象 vue中如何重置data 重置data需要了解3个小知识点 (1)this.$data获取组件当前状态的data对象 (2)this.$options.data获取组件初始状态的data对象 (3)Object.assign()方法用于将所有可美剧属性的值从一个或者多个源对象复制到目标对象,并返回目标对象. Object.assign(target,source1,source2,.

  • Vue中$forceUpdate()的使用方式

    Vue中$forceUpdate()的使用方式

    目录 $forceUpdate()的使用 有两种解决方法 方法一 方法二 关于$forceUpdate的一些理解 $forceUpdate()的使用 在Vue官方文档中指出,$forceUpdate具有强制刷新的作用. 那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的 <template> <p>{{userInfo.name}}</p> <but

  • vue中数据不响应的问题及解决

    目录 vue数据不响应问题 vue数据响应不及时问题 vue数据不响应问题 将本来要新增的属性提前在data中定义好 我可以提前在userInfo里面定义好,这样就不是新增属性了,就像下面这样 data() {     return {       userInfo: {         name: '子君',         sex: '男',         // 我先提前定义好         officialAccount: ''       }     }   } 直接替换掉userI

  • Vue中关于重新渲染组件的方法及总结

    目录 重新渲染组件的方法总结 重新加载整个页面 使用forceUpdate 总结 重新渲染组件的方法总结 有时Vue的反应性系统还不够,您只需要重新渲染组件即可. 重新渲染组件有以下几个办法: 可怕的方法:重新加载整个页面 可怕的方法:使用v-if 更好的方法:使用Vue的内置forceUpdate方法 最好的方法:在组件上进行key更改 重新加载整个页面 非常不建议这样做,我们来看下一个办法 v-if指令,该指令仅在组件为true时才渲染. 如果为false,则该组件在DOM中不存在. 下面我

随机推荐