vue2.x改变数据:

<template>
  <div class="v2">
    这是数据展示:
    <div v-for="item in nm" :key="item">name: {{item.name}}, type: {{item.type}}</div>
    <div @click="chfn">点击改变数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]
    }
  },
  methods: {
    chfn() {
      this.nm = [{name: 'a111',type: 10},{name: 'a222',type: 20},{name: 'a333',type: 30},]
    }
  }
}
</script>
<style>
</style>

vue2.x 没有点击改变数据方法的时候:

这是vue2.x 点击了改变方法后改变了数据

接下来我们看看 vue3.x 的初始化数据和改变数据:

<template>
  <div>展示ref初始化的数据:{{ num }}</div>
  <div @click="add" style="margin-bottom: 20px;background: #ccc;">点击改变ref赋值数据(每点击一次加上10)</div>
  <div v-for="item in a2.nm" :key="item">展示reactive初始化的数据:{{item.type}}</div>
  <div @click="aam" style="background: #ccc;" >点击改变reactive赋值数据(我这里测试时是点击后随意改变的)</div>
</template>
<script>
import { reactive, ref } from "vue";
export default {
  name: "Button",
  setup() {
    const num = ref(2); // ref 初始化单一型数据
    function add() { // 改变num的方法
      num.value += 10;
    }
    const a2 = reactive({nm: [{name: 'a1',type: 1},{name: 'a2',type: 2},{name: 'a3',type: 3},]})  // reactive 初始化复杂型数据
    function aam(item) { // 改变a2的方法
      console.log('aam', item)
      a2.nm = [{name: 'a11',type: 11},{name: 'a22',type: 22},{name: 'a33',type: 33},]
    }
    return {
      num,
      add, // 改变num的方法
      a2,
      aam   // 改变a2的方法
    }
  },
};
</script>

看起来要稍微的麻烦一点。它把定义和改变数据都放到了setup里面。还区分了定义数据的不同关键字(ref,reactive)

vue3.x 没有点击改变数据方法的时候:

这是 vue3.x 点击了改变方法后改变了数据

可以看到 vue3 的修改数据已经成功。

总结:vue2 和vue3对数据的初始化赋值还是有很大区别。在改变数据时也是有不小的区别。但是也不难。

vue3 操作修改数据的更多相关文章

  1. jsp 页面跳转后修改数据,返回时不更新

    项目jsp页面上用隐藏input框接收获取数据,在跳转入另一页面前,js操作修改数据,但返回时发现无效. 需求是点击抽奖后机会减少一次,但是当做跳转操作后返回时,次数有缓存问题 jsp: <in ...

  2. JDBC操作数据库之修改数据

    使用JDBC修改数据库中的数据,起操作方法是和添加数据差不多的,只不过在修改数据的时候还要用到UPDATE语句来实现的,例如:把图书信息id为1的图书数量改为100,其sql语句是:update bo ...

  3. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  4. DataTable数据类型的一些操作 增加行、插入行、修改数据、修改列名、修改列顺序、计算、选取或删除行(列)、排序、某列distinct值 等

    Datatable 这个数据类型在C#中涉及到对数据库读取时的用处还是挺大的,最近在处理一个报表开发时,一开始把所有的操作都放在sql 上面来做,就是我需要什么样的数据我就query出什么,但是这样其 ...

  5. DataGridView 直接修改数据操作

    DataGridView单元格进入编辑模式的方法: 双击或者f2: EditCellOnEnter 属性设为True,对DataGridView进行配置,当用户移动到该单元格后,该单元格可立即切换到编 ...

  6. c#教程之通过数据绑定修改数据

    通过数据绑定修改数据 "实体框架"提供了与数据库的双向通信通道.前面已经讲述了如何使用"实体框架"获 取数据,现在来看看如何修改获取的信息,并将改动发送回数据库 ...

  7. SQL server基础知识(表操作、数据约束、多表链接查询)

    SQL server基础知识 一.基础知识 (1).存储结构:数据库->表->数据 (2).管理数据库 增加:create database 数据库名称 删除:drop database ...

  8. phalcon: update修改数据却变成了insert插入数据

    phalcon: 在对表进行操作是,update修改数据却变成了insert插入数据. 发现,update的时,无论怎么加where都会变成了insert插入数据. 检查了一下表,原来是表没有 主键引 ...

  9. MYSQL中约束及修改数据表

    MYSQL中约束及修改数据表 28:约束约束保证数据的完整性和一致性约束分为表级约束和列级约束约束类型包括:    NOT NULL(非空约束)    PRIMARY KEY(主键约束)    UNI ...

随机推荐

  1. Java进程占用系统内存较高的排查方法

    1.通过top 查看具体是哪个进程占用内存较多 Tasks: 65 total, 1 running, 64 sleeping, 0 stopped, 0 zombie %Cpu(s): 2.0 us ...

  2. 74CMS 3.4 反射型XSS漏洞

    一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软件 2.因为74CMS3.4源代码编辑使用GBK编 ...

  3. Python库国内镜像

    中国科技大学 https://pypi.mirrors.ustc.edu.cn/simple/ http://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣 http://py ...

  4. Mysql之B+树索引实战

    索引代价 空间上的代价 一个索引都对应一棵B+树,树中每一个节点都是一个数据页,一个页默认会占用16KB的存储空间,所以一个索引也是会占用磁盘空间的. 时间上的代价 索引是对数据的排序,那么当对表中的 ...

  5. jvm-learning-概述

    JVM整体结构: java代码的执行流程 JVM的架构模型 public class StackStruTest { public static void main(String[] args) { ...

  6. kafka consumer代码梳理

    kafka consumer是一个单纯的单线程程序,因此相对于producer会更好理解些.阅读consumer代码的关键是理解回调,因为consumer中使用了大量的回调函数.参看kafka中的回调 ...

  7. 本地连接MySQL云服务器步骤与解决方案

    云服务器:aliyun MySQL 版本:mysql8 第一步首先,检查云服务器的 网络与安全 -> 安全组 是否开放了(MySQL)3306端口 第二步,登陆云服务器上的MySQL,检查需要远 ...

  8. 什么是 spring 装配?

    当 bean 在 Spring 容器中组合在一起时,它被称为装配或 bean 装配.Spring 容器需要知道需要什么 bean 以及容器应该如何使用依赖注入来将 bean 绑定 在一起,同时装配 b ...

  9. 学习 Haproxy (三)

    HAProxy安装 # wget http://www.haproxy.org/download/1.4/src/haproxy-1.4.24.tar.gz # tar xf haproxy-1.4. ...

  10. 4. Git基本工作流程

    4. Git基本工作流程 Git工作区域 向仓库中添加文件流程