首页 > 其他分享 >010.Vue3入门,数组变化侦听,实时在界面显示变化后的数据

010.Vue3入门,数组变化侦听,实时在界面显示变化后的数据

时间:2024-08-10 18:16:37浏览次数:15  
标签:010 item names 数组 Vue3 界面显示 侦听 nums1

1、代码如下:

<template>
  <h3>数组变化侦听</h3>
  <button @click="addListHandle">添加数据</button>
  <ul>
    <li v-for="(item,index) of names" :key="index">{{ item }}</li>
  </ul>
  <button @click="concatHandle">按钮</button>
  <h3>数组1</h3>
  <div v-for="(item,index) of nums1" :key="index">{{ item }}</div>
  <h3>数组2</h3>
  <div v-for="(item,index) of nums2" :key="index">{{ item }}</div>
</template>

<script>
export default {
  data() {
    return {
      names: ["张三", "李四", "王五"],
      nums1: [1, 2, 3],
      nums2: [11, 12, 13]
    }
  },
  methods: {
    addListHandle() {
      this.names = this.names.concat(["赵六"])
    },
    concatHandle() {
      this.nums1 = this.nums1.concat(this.nums2)
    }
  }
}
</script>

2、效果如下

 

标签:010,item,names,数组,Vue3,界面显示,侦听,nums1
From: https://www.cnblogs.com/tianpan2019/p/18352596

相关文章

  • 009.Vue3入门,事件修饰符的使用方法
    1、代码如下:<template><h3>事件修饰符</h3><[email protected]="clickHandle"href="http://www.baidu.com">百度</a><div@click="click1"><p@click="click2">测试1</p></div>......
  • 008.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参
    1、代码如下:<template><h3>内联事件处理群</h3><button@click="addCount1">Add</button><p>{{count1}}</p><button@click="addCount2('hello')">按钮</button><p>{{coun......
  • vue3中piniaPluginPersistedstate解决动态路由刷新空白问题
    总结:使用了回调函数来防止持久化数据前就渲染页面,导致刷新空白1.Store里的代码(**这里主要就是在addNewRoute写了回调callback**)addNewRoute(menuList,()=>{//重新渲染router.push({path:'/home/individual'})});import{defineStore}from"pinia";import......
  • 007.Vue3入门,进行列表渲染来输出循环的内容
    1、代码如下:<template><h3>列表渲染</h3><pv-for="(item,index)ofnames">序号:{{index}},内容:{{item}}</p><divv-for="itemofresult"><p>ID:{{item.id}},PKID:{{item.pkid}}</p>......
  • VS2010旗舰版VB.NET版本音频剪辑代码2024-8-10
    ImportsSystem.ComponentModelImportsSystem.IOImportsSystem.DiagnosticsImportsSystem.DrawingImportsSystem.Windows.FormsPublicClassForm1PrivateWithEventsbgWorkerAsNewBackgroundWorkerPrivateffmpegPathAsString=“C:\ffmpeg-master-lates......
  • Vue3Pinia入门学习
    文章目录什么是pinia创建空Vue项目并安装Pinia1.创建空Vue项目2.安装Pinia并注册、基础用法:实现counter实现getters异步actionstoreToRefs保持响应式解构什么是piniaPinia是Vue的专属状态管理库,可以实现跨组件或页面共享状态,是vuex状态管理工具的替代品,和......
  • 004.Vue3入门,使用绑定属性时undefined和disabled用法
    1、代码如下:<template><divv-bind:id="myId1"v-bind:class="testCls">测试1</div><divv-bind:id="myId2"v-bind:title="testTitle">测试2</div><div:id="myId3":class="te......
  • 002.Vue3入门,使用模板语法的一些高级功能
    1、代码如下:<template><h3>模板语法</h3><p>{{msg}}</p><p>{{msg_cn}}</p><p>{{number+1}}</p><p>{{ok?'Yes':'No'}}</p><p>{{message.split("......
  • useImperativeHandle 是什么?你可以理解为 vue3 的 expose
    useImperativeHandle确实类似于Vue3的expose,两者都用于控制子组件向父组件暴露的接口。在React中,useImperativeHandle需要与forwardRef一起使用,原因如下:转发引用:forwardRef允许父组件将ref传递给子组件。没有forwardRef,父组件无法直接访问子组件的ref。......
  • Vue3的学习---4
    4.Vue组件4.1初始Vue组件4.1.1根组件根组件的主要作用是:初始化应用程序。提供全局的状态管理或配置。作为其他组件的容器,构建整个应用程序的组件树。通过根组件,开发者可以控制应用程序的整体结构和行为,确保各个部分能够协同工作。<body><divid="app"></div>......