vue3框架基本使用(基础指令)

一、响应式数据

1.ref

ref可以定义 基本类型的响应式数据， 也可以定义对象类型响应式数据

<template><h1>{{ name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { ref } from 'vue'let name = ref('zhansan')function test(){name.value = "张三"
}</script>

注意：
1.响应式数据必须使用ref进行修饰
2.在template引入响应式数据时，直接引入变量名即可
3.修改ref修饰的响应数据的值时，必须使用 "变量.value"才能修改

2.reactive

reactive是定义对象类型的响应式数据

<template><h1>{{ obj.name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive } from 'vue'let obj = reactive({name: "zhangsan"})function test(){obj.name = "张三"
}</script>

注意：reactive 如果重新进行赋值，那么原来的对象就会失去响应式
reactive修改值的内容不需要使用 .value

3.选择原则

如果数据式对象类型，层级不深，两个都可以。如果层级深，推荐使用reactive

4.toRefs

先看实例，此时发现name的值变化了，但是模板中的值没有改变。
这是因为obj在解构后，name就不是响应式的数据了。

<template><h1>{{ name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive, toRef } from 'vue'let obj = reactive({name:"zhangsan"})
let { name } = objfunction test(){name = "张三"alert(name)
}</script>

修改后，成功了，包括obj的数据也变化了

<template><h1>{{ name }}</h1><h1>{{ obj.name }}</h1><button @click="test">修改姓名</button>
</template><script setup lang="ts">
import { reactive, toRefs } from 'vue'let obj = reactive({name:"zhangsan"})
let { name } = toRefs(obj)function test(){name.value = "张三"
}</script>

二、基础指令

v-xxx的指令有很多，这里只介绍一些常用的指令

1.v-if

v-if是条件渲染指令，它根据表达式的true和false来删除和插入元素，它的基本语法如下：v-if=“表达式”

<template><h1 v-if="data1">1</h1>
<h1 v-if="data2">2</h1>
<h1 v-if="data3 > 18">成年人</h1></template><script setup lang="ts">let data1 = true
let data2 = false
let data3 = 20</script>

2.v-show

v-show也是条件渲染指令，和v-if指令不同的是，v-show不会删除html元素，而是将它得属性设置为style=“display: none;”

<template>
<h1 v-show="data1">1</h1>
<h1 v-show="data2">2</h1>
<h1 v-show="data3 > 18">成年人</h1></template><script setup lang="ts">let data1 = true
let data2 = false
let data3 = 20</script>

3.v-else

v-else就是v-if得继续。
注意：v-else元素必须立即跟在v-if元素的后面——否则它不能被识别。

<template>
<h1 v-if="data1">data1:true</h1>
<h1 v-else>data1:false</h1><h1 v-if="data2">data2: true</h1>
<h1 v-else>data2: false</h1></template><script setup lang="ts">let data1 = true
let data2 = false</script>

4.v-for

4.1 遍历数组

注意： ：key=“index” 尽量带上。主要目的是为了识别每个节点得唯一标识.有了标识就能够更高效，准确得更新虚拟DOM

<template><h3 v-for="(item,index) in arr" :key="index">{{ item }},{{ index }}</h3>
</template><script setup lang="ts">let arr = ["zhangsan","lisi","wangwu"]</script>

4.2 遍历对象

<template><ul><li  v-for="(value,key,index) in object" :key="index">{{ value }},{{key}}{{index}}</li></ul>
</template><script setup lang="ts">let object = {name: "zhangsan",age:20,gender: "boy"}</script>

4.3 遍历对象数组

<template><ul><li  v-for="(value,index) in object" :key="index">{{ value.name }}{{index}}</li></ul>
</template><script setup lang="ts">let object = [{name: "zhangsan",age:20,gender: "boy"},{name: "lisi",age:21,gender: "boy"},{name: "wangwu",age:22,gender: "boy"},]</script>

5.v-bind

1.v-bind得简写是 “冒号”
2.v-bind 其实就是让标签得属性 绑定一个 变量 而不是 字符串
先看一个实例，a标签绑定得herf属性被识别成了字符串，而不是一个变量

<template><a href="baidu">百度一下</a>
</template><script setup lang="ts">const baidu = "http://www.baidu.com"</script>

此时就需要使用v-bind进行变量绑定。

<template><a :href="baidu">百度一下</a>
</template><script setup lang="ts">const baidu = "http://www.baidu.com"</script>

6.v-on

v-on指令用于监听事件，简写为 @

6.1 鼠标点击事件

<template><el-button type="success" v-on:click="send">完整写法</el-button><el-button type="success" @click="send">简写</el-button></template><script setup lang="ts">
import { ElMessage } from 'element-plus';function send(){ElMessage({type: "success",message: "hello"})    
}</script>

6.2 传值得点击事件

<template><h1>{{ sum }}</h1><el-button type="success" @click="sum1">+1</el-button><el-button type="success" @click="sum10(10)">+10</el-button></template><script setup lang="ts">
import { ref } from 'vue'let sum = ref(0)function sum1() {sum.value++console.log(sum.value)
}function sum10(num:number) {sum.value+=numconsole.log(sum.value)
}</script>

7.v-model

数据双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
v-model只收集表单的数据，别的标签不起作用。
完整写法：v-model:value=“text”
简写： v-model=text
这里可以看出v-model是针对input 的value属性进行处理

<template><h1>{{ text }}</h1><input type="text" v-model="text" style="position: absolute;top:100px;"></template><script setup lang="ts">
import {ref} from 'vue'let text = ref()</script>

三、计算属性computed

computed的好处就是，被计算的数据发生变化，结果也会发生变化

<template>
<h1>{{ x }}</h1>
<button @click="x++">加1</button><h1>{{ y }}</h1>
<button @click="y++">加1</button><h1>{{ sum }}</h1></template><script setup lang="ts">
import {computed, ref,toRef} from 'vue'let x = ref(1)
let y = ref(2)#  这里使用computed 方法进行数据的计算
let sum = computed(() => {return x.value + y.value
})</script>

四、watch

1.作用

监视数据的变化

2.特点

vue3中的watch只监控以下四种数据

1 ref定义的数据
2.reactive定义的数据
3.函数返回一个值
4.一个包含上述内容的数组

3.watch-ref数据

注意点：
1.监视的数据(sum)不用写.value
2.回调函数有两个参数，第一个是变化的新值，第二个是变化之前的旧值
3.在回调函数中，可以直接调用watch的返回值来停止watch的监视

<template>
<h1>sum的和是: {{ sum }}</h1>
<button @click="changeSum">sum加1</button></template><script setup lang="ts">
import { ref,watch } from 'vue'let sum = ref(0)function changeSum(){sum.value += 1
}let stopWatch = watch(sum,(newVlue,oldValue) => {console.log(newVlue)if (newVlue > 10) {stopWatch()}
})</script>

4.watch-reactive数据

注意：
1.修改了对象的人一一个值，都可以触发watch
2.newValue,oldValue值是一样的，都是显示修改后的值。

<template>
<h1>姓名: {{ obj.name }}</h1>
<button @click="changename">点我修改姓名</button><h1>年龄：{{ obj.age }}</h1>
<button @click="changeage">点我修改年龄</button></template><script setup lang="ts">
import {  reactive,watch } from 'vue'let obj = reactive({name: "zhangsan",age: 20})function changename(){obj.name = "张三"
}function changeage(){obj.age++
}watch(obj,(newValue,oldValue)=>{console.log('变化了')console.log(newValue,oldValue)})</script>

所以监视器可以简写为：回调函数的形参只写一个就可以了

let stop = watch(obj,(newValue)=>{if (newValue.age == 30){stop()console.log('停止监视')}
})

5.监视对象某个属性

在4中，监视的是整个对象，如果对象中属性特别多，需要只监控某一个属性。
方法如下：将监控对象的参数 以函数的形式编写。
实例如下：

5.1 监控普通属性

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}// 监视普通类型属性
watch(()=> { return persion.name },(newValue,oldValue)=>{console.log(newValue,oldValue)
})</script>

5.2 监视对象属性

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}// 监视对象类型属性，并且开启深度监视。深度监视的含义就是监视car对象中的每个属性。
// 如果不开启深度监视，只能是car整个对象变化的的时候才能监视到
watch(()=>{return persion.car},(newValue,oldValue)=>{console.log(newValue,oldValue)},{deep:true}
)
</script>

6.监听多个属性

监听多个属性，要写成箭头函数数组的形式

<template>
<h1>姓名：{{ persion.name }}</h1>
<button @click="changeName">修改姓名</button><h1>汽车: {{ persion.car.c1 }},{{  persion.car.c2 }} </h1>
<button @click="changeC1">修改汽车1</button>
<button @click="changeC2">修改汽车2</button>
<button @click="changeAll">修改所有汽车</button></template><script setup lang="ts">
import { reactive, watch } from 'vue'let persion = reactive({name: "zhangsan",car:{c1: "长城",c2: "大众"}
})function changeName(){persion.name += "~"
}function changeC1(){persion.car.c1 = '奔驰'}
function changeC2(){persion.car.c2 = '奥迪'}
function changeAll(){persion.car = {c1:"宝马",c2:"丰田"}
}watch(// 监听多个属性，要写成箭头函数数组的形式[ ()=> persion.name,()=>persion.car.c1 ],(newValue,oldValue)=>{console.log(newValue,oldValue)},{deep:true}
)
</script>

五、watchEffect

watcheffect的好处就是，不用指定监视对象，直接编写处理逻辑就可以了，非常的方便

<template>
<h1>sum的和: {{sum}}</h1>
<button @click="sum++">sum加1</button></template><script setup lang="ts">
import { ref,watchEffect } from 'vue'let sum = ref(0)watchEffect(()=>{if(sum.value > 10 ){console.log("sum是一个大于10的数字") }
})</script>

六、标签的ref属性

ref属性是能够定位html元素的属性,相当于id或者class定位的作用

<template>
<h1>张三</h1>
<h1 ref="t1">李四</h1><button @click="show">查看</button></template><script setup lang="ts">
import {ref} from 'vue'let t1 = ref()function show(){console.log(t1.value)
}
</script>

七、组件生命周期

vue3和vue2生命周期略有不同

生命周期函数作用
onBeforeMount()组件挂载到节点上之前执行
onMounted()组件挂载完成后执行
onBeforeUpdate()组件更新之前执行
onUpdated()组件更新完成后执行
onBeforeUnmount()组件卸载之前执行
onUnmounted()组件卸载完成后执行

1.创建test子组件

这里测试onBeforeMount函数

<template><h1>我是test组件</h1>
</template><script setup>
import { onBeforeMount,onMounted } from 'vue'onBeforeMount(()=>{console.log("挂载前")// 这是开启debug模式，程序到这里就不会在继续运行了debugger
})</script>

2.引入test子组件

在app.vue中引入组件

<template><h1>我是app.vue</h1>// 引入test子组件<test></test>
</template><script setup>
import test from './components/test.vue'</script>

3.验证结果

发现子组件的的结果没有在app.vue中显示，但是onBeforeMount函数中的输出已经控制台输出了

八、Pinia集中式状态管理库

1.安装

pnpm install pinia

2.引入pinia

在main.ts中引入pinia

import { createPinia } from 'pinia'const store = createPinia()
app.use(store)

3.创建数据仓库

在src下创建store/“数据文件.ts”。这里用于测试的文件是userInfo.ts

3.1 定义数据

在userinfo.ts文件中定义数据。
definStore，有两个参数，第一个参数式一个key，尽量和文件名保持一致。第二个参数就定义的数据

import { defineStore } from 'pinia'export const userInfoStore = defineStore('userInfo',{state(){return {sum: 0}}
})

3.2 引用数据

在app.vue中引用sum

<template>// 应用sum<h1> {{ use_userInfoStore.sum }} </h1></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()</script>

4.修改数据

4.1 方法1

如果只修改一个值。可以使用这个办法。比较简单

<template><h1> {{ use_userInfoStore.sum }} </h1><button @click="changSum">加1</button></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()function changSum(){use_userInfoStore.sum++
}</script>

4.2 方法2：$patch

如果数据有多个，可以使用以下$patch 方法

<template><h1> {{ use_userInfoStore.sum }} {{ use_userInfoStore.name }} {{ use_userInfoStore.age }}</h1><button @click="changSum">加1</button></template><script setup>
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()function changSum(){use_userInfoStore.$patch({sum:20,age: 30,name: "张三",})}</script>

当然使用上边的方法也可以,如下

function changSum(){use_userInfoStore.sum++use_userInfoStore.age = 30use_userInfoStore.name = "张三"}

5.组合式写法

以上都是选项式写法，组合式写法，在语法上相对来说比较简洁

5.1 定义数据

这里和选项式定义就有了区别，
1.没有了stat和action关键字，直接写逻辑。
2.在函数中不用使用this了


import { defineStore } from 'pinia'
import {ref} from 'vue'export const userInfoStore = defineStore('userInfo',()=>{const sum = ref(0)function changeSum(value){if (value > 10){alert('数字太大了')}else{sum.value += value}}return {sum,changeSum}
})

5.2 修改数据

<template>
<h1>sum = {{ use_userInfoStore.sum  }}</h1>
<button @click="add1">方式1</button>
<button @click="add2">方式2</button></template><script setup lang="ts">
import { userInfoStore } from './store/userInfo'const use_userInfoStore = userInfoStore()// 方式1：直接修改
function add1(){use_userInfoStore.sum += 1
}// 方式2： 调用pinia中的函数进行修改，对于传入的数据可以进行限制
function add2(){use_userInfoStore.changeSum(5)
}</script>

九、组件通信

1.props

props可以实现 父组件传数据给子组件，也可以子组件给父组件传数据

1.1 父传子

定义子组件
注意： 接收的key 一定要和 父组件传递的key一致。否则接收不到

<template><h1>我是test.vue</h1><!-- 使用接收的数据 --><h1>{{ username }}</h1>
</template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { defineProps } from 'vue'// 这里定义prop_res 是为了打印，如果不接收 打印不了 接收的数据
const prop_res = defineProps(['username'])// 打印接收的数据
console.log(prop_res.username)</script>

定义父组件app.vue
注意点：
:username 是一个自定义的key值，并不是一个属性。v-bind决定了传递过去的是一个变量
“username” 是传递过去的变量

<template>
<h1>我是app.vue</h1>// z这里是给test组件传值。将username变量传给test组件
<test :username="username"></test>
</template><script setup lang="ts">
import {ref} from 'vue'
import test   from './components/test.vue'let username = ref("admin")</script>

1.2 子传父

子传父的原理 其实还是 在父组件中定义一个函数，然后传递给子组件,子组件调用这个函数 将数据通过这个函数传递给父组件

定义子组件：

<template>
<h1>我是app.vue</h1>
<h1>字组数据为: {{ Fdata }}</h1><!-- 将定义好的函数发送给子组件 -->
<test :send_data="send_data"></test></template><script setup lang="ts">
import test from './components/test.vue'
import {ref} from 'vue'let Fdata = ref()// 定义好一个函数，让子组件使用，然后利用这个函数将数据发送给父组件
function send_data(value:string){Fdata.value = value}</script>

定义子组件

<template><h1>我是test.vue</h1><!-- 使用按钮将子组件的数据发送给父组件 --><button @click="send_data(data)">发送数据给父组件</button></template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { ref,defineProps } from 'vue'const data = ref('测试数据122211')// 接收父组件传过来的函数，用于发送数据
defineProps(['send_data'])</script>

2.provide和inject

这两个是一个组合，专门实现父组件向下 给1一级后多级子组件传递数据

设置父组件

<template>
<h1>我是app.vue</h1>
<hr>
<test></test></template><script setup lang="ts">
import {ref,provide} from 'vue'
import test from './components/test.vue'let Fdata = ref(100)// 将Fdata变量 设置一个自定义key 提供给所有的后代组件使用
provide('d1',Fdata)</script>

设置子组件

<template><h1>我是test.vue</h1><h1>父组件的数据为：{{ x }}</h1></template><script lang="ts">export default {name:"test"}
</script><script setup lang="ts">
import { inject } from 'vue'// 引入父组件提供的变量。然后在模板中使用
let x = inject('d1')</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/26759.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

原子阿波罗STM32F429程序的控制器改为STM32F407驱动LCD屏

原子阿波罗STM32F429程序的控制器改为STM32F407驱动LCD屏

原子大神的阿波罗开发板使用STM32F429IGT6控制器&#xff0c;编程风格也与探索者F407系列有了很大的不同&#xff0c;使用BSP功能模块编程了&#xff0c;也有点类似于安富莱的编程风格了。这种模块式程序风格的优点是更加方便移植&#xff0c;更方便泡系统。 但无奈手里只有F40…
阅读更多...
wordpress旅游网站模板

wordpress旅游网站模板

旅行社wordpress主题 简洁实用的旅行社wordpress主题&#xff0c;适用于旅行社建网站的wordpress主题模板。 https://www.jianzhanpress.com/?p4296 旅游WordPress主题 简洁实用的旅游WordPress主题&#xff0c;适合做旅游公司网站的WordPress主题模板。 https://www.jian…
阅读更多...
CSS实现3个圆点加载动画

CSS实现3个圆点加载动画

加载动画主要使用了css的animation和transform属性&#xff0c;animation用来实现动画效果&#xff0c;transform实现过渡&#xff0c;让动画看起来更真实 一、html <div class"loadding-box"><div class"dot1"></div><div class&qu…
阅读更多...
【网络编程】基于TCP的服务器端/客户端

【网络编程】基于TCP的服务器端/客户端

TCP是Transmission Control Protocol(传输控制协议)简写。因为TCP套接字是面向连接的&#xff0c;因此又称为基于流的套接字。 把协议分为多个层次&#xff0c;设计更容易&#xff0c;通过标准化操作设计开放式系统 网络层介绍 链路层 链路层是物理连接领域标准化的结果&…
阅读更多...
学习分享-FutureTask

学习分享-FutureTask

前言 今天再改简历的时候回顾了之前实习用到的FutureTask&#xff0c;借此来回顾一下相关知识。 FutureTask 介绍 FutureTask 是 Java 并发包&#xff08;java.util.concurrent&#xff09;中的一个类&#xff0c;用于封装异步任务。它实现了 RunnableFuture 接口&#xff0…
阅读更多...
Win快速删除node_modules

Win快速删除node_modules

在Windows系统上删除 node_modules 文件夹通常是一个缓慢且耗时的过程。这主要是由于几个关键因素导致的&#xff1a; 主要原因 文件数量多且嵌套深&#xff1a; node_modules 文件夹通常包含成千上万的子文件夹和文件。由于其结构复杂&#xff0c;文件和文件夹往往嵌套得非常…
阅读更多...
JavaScript的数组排序

JavaScript的数组排序

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
函数式开发接口（ Consumer、Function）在实际开发中的应用场景

函数式开发接口（ Consumer、Function）在实际开发中的应用场景

之前有个扫码下载文件需求&#xff0c;由于要同时进行记录下载人的记录。一开始用的是异步进行日志记录。发现有的用户扫码下载了一次文件&#xff0c;日志记录了三条。这种很容易联想到是因为网络抖动造成的。 问题代码 由于日志记录是异步的&#xff0c;文件下载需要时间。同…
阅读更多...
干货下载 |《数据治理：数据中台建设与能力提升策略》

干货下载 |《数据治理：数据中台建设与能力提升策略》

在当今这个信息爆炸的时代&#xff0c;数据已经成为企业最宝贵的资产之一。数据不仅能帮助企业洞察市场趋势&#xff0c;还能优化业务流程&#xff0c;提升运营效率&#xff0c;进而在激烈的市场竞争中占据优势地位。然而&#xff0c;如何有效地管理和利用这些数据&#xff0c;…
阅读更多...
(代数:解一元二次方程)可以使用下面的公式求一元二次方程 ax2+bx+c0 的两个根:

(代数:解一元二次方程)可以使用下面的公式求一元二次方程 ax2+bx+c0 的两个根:

(代数:解一元二次方程)可以使用下面的公式求一元二次方程 ax2bxc0 的两个根: b2-4ac 称作一元二次方程的判别式。如果它是正值,那么一元二次方程就有两个实数根。 如果它为 0&#xff0c;方程式就只有一个根。如果它是负值&#xff0c;方程式无实根。 编写程序&#xff0c;提示…
阅读更多...
推挽与开漏输出

推挽与开漏输出

一般来说&#xff0c;微控制器的引脚都会有一个驱动电路&#xff0c;可以配置不同类型的数字和模拟电路接口。输出模式一般会有推挽与开漏输出。 推挽输出 推挽输出&#xff08;Push-Pull Output&#xff09;&#xff0c;故名思意能输出两种电平&#xff0c;一种是推&#xf…
阅读更多...
DOM-获取元素

DOM-获取元素

获取元素的方法&#xff1a; 方法一&#xff1a;根据id获取元素document.getElementById <div id"time">2024-6-4</div> 在script标签中&#xff1a;注意getElementById括号里面必须要有引号&#xff0c;获得的是对象类型 var timer document.getEle…
阅读更多...
设计模式——建造者模式(生成器模式)

设计模式——建造者模式(生成器模式)

建造者模式(生成器模式) 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示的意图 用了建造者模式&#xff0c;那么用户就只需要指定需要构建的类型就可以得到它们&#xff0c;而具体构造的细节和过程不需要知道 概括地说&#xff0c;Bu…
阅读更多...
2. 音视频H264

2. 音视频H264

视频软件基本流程 1.什么是H264 H.264是由ITU-T视频编码专家组&#xff08;VCEG&#xff09;和ISO/IEC动态图像专家组&#xff08;MPEG&#xff09;联合组成的联合视频组&#xff08;JVT&#xff0c;Joint Video Team&#xff09;提出的高度压缩数字视频编解码器标准 H265又名高…
阅读更多...
1004.最大连续1的个数

1004.最大连续1的个数

给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1,0,0,0,1,1,1,1,0], K 2 输出&#xff1a;6 解释&#xff1a;[1,1,1,0,0,1,1,1,1,1,1] 粗体数字…
阅读更多...
算法题day43（补5.29日卡：动态规划03）

算法题day43（补5.29日卡：动态规划03）

一、01背包问题基础&#xff1a; 有n件物品和一个最多能背重量为w的背包。第i件物品的重量是weight[i],得到的价值是value[i]。每件物品只能用一次&#xff0c;求解哪些物品装入背包里物品价值总和最大。 1.用dp的方法做&#xff1a; ①dp[i][j]的含义&#xff1a;从下标为[…
阅读更多...
席卷的B站《植物大战僵尸杂交版》V2.0.88整合包，PC和手机可用，含通关存档和视频教程！

席卷的B站《植物大战僵尸杂交版》V2.0.88整合包，PC和手机可用，含通关存档和视频教程！

今天给大家安利一款席卷B站&#xff0c;火爆全网的游戏——《植物大战僵尸杂交版》2.0.88整合包。 这个是网络上现存植物大战僵尸杂交版的最全整合&#xff0c;包含了修改工具&#xff0c;超强通关存档和高清工具。工具包有安装视频教程&#xff0c;支持手机版和pc多端使用&am…
阅读更多...
家用洗地机前十名排行榜：2024十大热销款式好用不踩雷

家用洗地机前十名排行榜：2024十大热销款式好用不踩雷

洗地机强大的清洁力和高效的清洁效率&#xff0c;迅速代替了吸尘器、电动拖把、蒸汽拖把的位置&#xff0c;成为家庭地面清洁的新宠&#xff0c;各大厂商也纷纷上新自家新品。但是这个也造成了人们在挑选机型的时候无从下手&#xff0c;甚至很多新手购机&#xff0c;几乎对洗地…
阅读更多...
Typora 破解、激活！亲测有效！2024 最新激活方法

Typora 破解、激活！亲测有效！2024 最新激活方法

Typora 破解、激活&#xff01;亲测有效&#xff01;2024 最新激活方法 Typora是一款简单易用的Markdown编辑器。 Markdown是一种可以使用普通文本编辑器编写的标记语言&#xff0c;通过简单的标记语法&#xff0c;它可以使普通文本内容具有一定的格式&#xff0c;其目标是实现…
阅读更多...
【Intel CVPR 2024】通过图像扩散模型生成高质量360度场景，只需要一个语言模型

【Intel CVPR 2024】通过图像扩散模型生成高质量360度场景，只需要一个语言模型

在当前人工智能取得突破性进展的时代&#xff0c;从单一输入图像生成全景场景仍是一项关键挑战。大多数现有方法都使用基于扩散的迭代或同步多视角内绘。然而&#xff0c;由于缺乏全局场景布局先验&#xff0c;导致输出结果存在重复对象&#xff08;如卧室中的多张床&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023