vue中data数据之间如何赋值问题

目录
  • vue data数据之间如何赋值
    • 实现方式
  • vue Data数据赋值变量语法

vue data数据之间如何赋值

最近我妹突然问我vue的data之间需要进行赋值，这是什么奇葩需求，干嘛不直接自己定义好就好了啊，既然有这种场景，那么我们就需要去解决这种场景。

实现方式

<template>
  <div>
     <Input v-model="dictValue" placeholder="请输入字典的值" clearable style="width: 200px" />
  </div>
</template>
<script>
    export default {
        data () {
            return {
                initValue: '默认值',
                // 错误的使用方式
                // dictValue: this.initValue
                dictValue:''
            }
        },
      mounted(){
        // 正确的初始化方式
        this.dictValue = this.initValue
      }
    }
</script>

以上的代码大家可以直接在https://run.iviewui.com/sCE69xV2这个地址上运行即可验证

vue Data数据赋值变量语法

computed: {
pickerOptions() {
      let _this = this;
      return {
        disabledDate(time) {
          let time1 = _this.time; // 动态起始时间 ，这个时间是已经得到的时间戳
          return time.getTime() > new Date(time1);
        },
      };
    },
}

采用计算属性  取data中的变量进行赋值。

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

赞 (0)

相关推荐

  • vue实现动态给data函数中的属性赋值

    目录 vue动态给data函数中的属性赋值 vue给data中的数据赋值报错 问题背景 分析 解决方案 vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这个相关的属性被修改的时候,在监视器中的handler函数中写处理逻辑即可 vue给data中的数据赋值报错 TypeError: Cannot set property ‘tableData‘ of undefined 问题背景 最近刚入门vue,有个典型的场景,也是简单的坑.就是需要通过axios请求数

  • vue data对象重新赋值无效(未更改)的解决方式

    vue存在一个比较深的问题就是data中的属性对象如果在初始化的时候为{},那么后面在方法用普通的js语法赋值会无效 这里是data data() { return { model: {} }; } 这里是方法里的普通赋值 afterUpload(response) { this.model.icon = response.url; } 普通方法会无效,需要使用vue提供的方法重新显示声明 afterUpload(response) { this.$set(this.model,'icon',r

  • vuex 实现getter值赋值给vue组件里的data示例

    通过watch将orderDetailsData对象赋值给data中的consignee对象,这样能将操作能避免v-model修改时,直接改动vuex中的值. <template> <input type="text" placeholder="请输入收货人名字" v-model="consignee.name"> <input type="text" placeholder="请输入收

  • 浅谈vue中computed属性对data属性赋值为undefined的原因

    浅谈vue中computed属性对data属性赋值为undefined的原因

    目录 场景: 原因: _init中初始化 _init中做了什么? 在initState()做了这些事情 解决办法: 场景: 我在computed中return了一个值,然后在data中直接将它复制给另一个属性.结果data中的属性值为undefined… 代码示例: timer为undefined… 原因: 在这里很容易想到是执行顺序的问题,computed中的属性和data中的属性最终都会加载到app这个实例下.如果data中的实例属性被创建完成的时候,computed中的实例属性还没被创建,

  • vue如何遍历data所有变量并赋值

    vue如何遍历data所有变量并赋值

    目录 遍历data所有变量并赋值 遍历data工具类 遍历data所有变量并赋值 遍历data工具类 var _data_str = sessionStorage.getItem("SCM301"); //将json字符串转成对象 var store_data = JSON.parse(_data_str); if (_data_str) { //this._data为vue的data组件中的data getObjectData(this._data, store_data); } /

  • 解决vue接口数据赋值给data没有反应的问题

    问题: 就是我在接口赋值给了data的变量,然后组件的效果没有出来(我的是旋转效果) 代码如下: data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('xxxxxxxxxxxx', {}, (res) => { if (is.object(res)) { if (res.status === 'succ') { this.slides = re

  • vue data变量相互赋值后被实时同步的解决步骤

    数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源: 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法: 我们在通过JavaScript把 "val_1" 转换成字符串类型,再JSON.parse,最后

  • vue 数据(data)赋值问题的解决方案

    vue 数据(data)赋值问题的解决方案

    总结一下我遇到的一个纠结很久的问题. 在项目中需要用到后台的数据对前端渲染,使用到了vue整合的axios,使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data()中定义的属性: 执行后前端报错: 原因: 在请求执行成功后执行回调函数中的内容,回调函数处于其它函数的内部this不会与任何对象绑定,为undefined. 解决方案: 一)将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性 二)使用箭头函数 补充:解决 vue

  • vue中data数据之间如何赋值问题

    目录 vue data数据之间如何赋值 实现方式 vue Data数据赋值变量语法 vue data数据之间如何赋值 最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. 实现方式 <template>   <div>      <Input v-model="dictValue" placeholder="请输入字典的值" clearable

  • vue项目中data数据之间互相访问的实现

    vue项目中data数据之间互相访问的实现

    如下代码: <div id="vue_det"> <input type="number" v-model="text"> <div>{{textAdd}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { text: 1, tex

  • vue 需求 data中的数据之间的调用操作

    我遇到过这种情况 就是在我的data中 会有数据调用data中的其他数据 如图 我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不能写成alertInfoType:this.screeningCondition.type这种的 原理是什么?忘记了 知道了可以评论说下 所以 我们可以这样写 在mounted中直接赋值就可以了! 不知道你们有么有遇到过这种情况 反正我是遇到了两次了 第一次忘记怎么处理的了 ...... over 希望

  • 全面解析vue中的数据双向绑定

    1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter.这也正是Vue不兼容IE8以下的原因. 2.Object.defineProerty(); var obj = {}; Object.defineProperty(obj,"hello",{ enumerable: true, //表示这个属性能够通过 for -- in 循环 (是否可枚举); configurable

  • vue 修改 data 数据问题并实时显示的方法

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 拓展知识:Vue刷新修改页面中的数据方法 因为Vue对象一旦生成之后,如果只是修改Vue对象中的数据,在页面上是不会自动更新的,得用Vue.set()函数来进行修改,函数格式为Vue.set(data,'para','value'),其中data为Vue创建时传输的data对象名,后面两个参数分别是data对象中的变量名称与值 页面初

  • vue 修改 data 数据问题并实时显示操作

    首先,定义一个变量: (以下以本人写的为例) 首先定义一个变量: 然后,给变量赋值: 如果想要修改数据,主要代码如下: 然后界面上要记得绑定数据id: 就Ok了. 补充知识:vue data中数组以及对象 属性改变时不能及时反馈到视图中问题的解决方式 1.vue 对数组更新检测 的机制又很明确的说明: 变异方法:Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新. 这些方法如下: push() pop() shift() unshift() splice() sort() rever

  • 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中data的代理和监听

    目录 假设现在有一个data 需求一: 用 Object.defineProperty 定义 n 需求二:n不能小于0 所以就有了需求三:不暴露data中可以设置的属性,而是使用一个代理 因此引出了需求四:就算用户擅自修改myData,也要进行拦截 总结 接下来通过几个需求的完成来一步步看看data中的代理和监听是怎么样的 假设现在有一个data let data0 = { n:0 } 需求一: 用 Object.defineProperty 定义 n let data1 = {} Object

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • Vue中保存数据到磁盘文件的方法

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定. 以app.vue为例 <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button> 下面在方法中定义函数 <code class="la

随机推荐