模版语法、列表渲染、文本指令、事件指令、属性指令、vue中的style和class、条件渲染、v-for能循环的

vue 基础

1 模版语法

2 文本指令

2.1 模版语法 v-text
2.2 文本指令 v-html
2.3 文本指令 v-show
2.4 文本指令 v-if
2.5 v-show把图片的显示隐藏

3 事件指令

ES6对象语法演变
3.1 v-on 不传参/a>
3.2 v-on 传参和 v-on:简写成@

4 属性指令

4.1 属性指令之 v-bind: 简写成 :
4.2 用属性指令切换图片
4.3 属性指令之 class 属性

5 style和class

5.1 style 字符串类型
5.2 style 数组类型
5.3 style 对象类型
5.4 class是字符串类型
5.5 class是数组类型
5.6 class是对象类型

6 条件渲染

7列表渲染

7.2 v-for能循环的

1 模版语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h1>模板语法</h1><p>渲染字符串-姓名：{{ name }}</p><p>渲染字符串-年龄：{{ age }}</p><p>渲染-数组：{{ list1 }}</p><p>渲染-数组-按位置取值：{{ list1[1] }}</p><p>渲染-对象：{{ obj1 }}</p><p>渲染-对象-按key取值：{{ obj1.name }}</p><p>渲染-对象-按key取值：{{ obj1['age'] }}</p><p>渲染-标签-字符串(是因为它默认处理了xss攻击)：{{ link1 }}</p><p>三目运算符(10>9)：{{10>9 ? true:false}}</p><p>三目运算符(对象的长度大于2吗)：{{list1.length > 2 ? '大于2': '不大于2'}}</p><p>简单表达式(99 + 1=)：{{ 99 + 1 }}</p><!-- <p>函数(渲染出函数的返回结果)：{{ add(1, 2) }}</p> --></div>
</body>
</html><script>new Vue({el: '#app',data: {name: 'lin',age: 18,list1: [1, 2, 3, 4],  // 数组obj1: {name: 'today', age: 20},  // 对象link1: '<a href="https://www.baidu.com">百度一下</a>',}})// 定义变量let list1 = [1, 2, 3, 4]let res = list1.length < 2 ? '大于2': '不大于2'console.log(res)</script>

2 文本指令

# vue 的指令系统 ，放在标签,以v-开头的，每个指令都有特殊用途
v-text:把字符串内容渲染到标签内部
v-html:把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签
v-show:控制标签显示与否:通过style的display是否等于none控制，在html中还存在
v-if:控制标签显示与否:通过dom操作做的，这个标签从dom中删除了

2.1 文本指令 v-text

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>文本指令 v-text v-html</h1><h2>文本指令之 v-text，把字符串内容渲染到标签内部</h2><!-- 之前是用模板语法的插值语法，现在用文本指令 --><p>{{name}}</p><!-- 文本指令 --><p v-text="name"></p><p v-text="link1"></p></div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {name: 'lin',link1: '<a href="https://www.baidu.com">百度一下</a>',isShow: true,ifShow: true,}});
</script>

2.2 文本指令 v-html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>文本指令 v-html</h1><h2>文本指令之 v-html，把字符串内容渲染到标签内部，但如果是标签字符串，会渲染成标签 </h2><h3>把标签字符串渲染成标签使用</h3><p v-html="link1"></p>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {name: 'lin',link1: '<a href="https://www.baidu.com">百度一下</a>',}});
</script>

2.3 文本指令 v-show

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>文本指令 v-show</h1><h2>v-show 控制的是标签 显示与否:通过style的display是否等于none控制，在html中还存在</h2><div><p v-show="isShow">我是p标签</p></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {isShow: true,ifShow: true,}});
</script>

2.4 文本指令 v-if

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script></head>
<body>
<div id="app"><h2>v-if 控制的是标签 显示与否:通过dom操作，这个标签从dom中删除了</h2><div><span v-if="ifShow">我是span标签</span></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {ifShow: true,}});
</script>

2.5 v-show把图片的显示隐藏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>文本指令 v-show</h1><h2>用v-show 展示图片或隐蔽</h1><div><button @click="handleShow">点我看风景</button><br><img src="./img/1.webp" alt="" width="300" height="300" v-show="showPhoto"></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {showPhoto: false},methods: {handleShow(){this.showPhoto = !this.showPhoto}}});</script>

3 事件指令

# 用v-on绑定事件后，只要触发事件，就会执行函数v-on:点击事件，双击事件，滑动事件 ='函数'# 用的最多的就是click事件 ，单击事件# v-on:click=‘函数’---》放在标签上，点击标签，就会触发函数执行---》函数必须写在methods中，可以用es6语法的简写methods: {// handleClick: function () {//     alert('美女')// },handleClick() {  // es6 语法alert('美女')},}# v-on: 可以使用 @ 替换

ES6对象语法演变

// ES6 对象写法var userinfo = {"username": "lin", "password": "123"}// 可写成下面这种：var userinfo = {username: "lin", password: "123"}var username = "lin"var password = "123"// var userinfo = {username: username, password:password}// 可写成下面这种：// 放个变量到对象中，会把变量名作为key,值作为valuevar userinfo = {username, password}console.log(userinfo['username'])console.log(userinfo.username)var userinfo = {username: "lin",password: "123",printName: function () {console.log(this.username)}}// 调用函数userinfo.printName()// 演变var printName = function () {console.log(this.username)}var userinfo = {username: "lin",password: "123",printName() {console.log(this.username)}}

3.1 v-on 不传参

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>事件指令</h1><button v-on:click="handleClick">点我,看风景</button>
</div>
</body>
</html><script>let vm = new Vue({el: '#app',data: {},methods: {handleClick(){alert('hello')}}});
</script>

3.2 v-on 传参和 v-on:简写成@

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>事件指令</h1><button v-on:click="handleClick">点我,看风景</button><br><button v-on:click="handleClick1">点我，传参数, 如果不传，默认第一个参数是：点击事件对象：PointerEvent</button><br><button v-on:click="handleClick1(1)">点我，传一个参数,只要穿了参数，点击事件对象就不传了</button><br><button v-on:click="handleClick1(1, 2)">点我，传两个参数,正常使用</button><br><button v-on:click="handleClick1(1, 2, 3)">点我，传多个参数,只用前两个</button><br><button v-on:click="handleClick1(1, $event)">点我，传第一个参数,第二个是点击事件</button><hr><h1>把 v-on: 简写  @ </h1><button @click="handleClick">点我,看风景</button>
</div>
</body>
</html><script>let vm = new Vue({el: '#app',data: {},methods: {}});
</script>

4 属性指令

# 每个标签都会有属性，动态替换属性的值，就要用到属性指令# v-bind:属性='变量'  ---》针对所有标签的所有属性  id name
# 简写成  :属性='变量':id='变量':name='变量'# 切换图片案例--》点击就修改src属性

4.1 属性指令之 v-bind: 简写成 : 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>属性指令</h1><div><button @click="handleClick">点我，有风景</button><br><button @click="handleClick1">点我，变大风景</button><br>
<!--        <img v-bind:src="img_url" v-bind:width="width" v-bind:height="height">--><p>属性简写，就是把 v-bind: 简写成 : </p><img :src="img_url" :width="width" :height="height"></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {img_url: '',width: 300,height: 300,},methods: {handleClick(){this.img_url = './img/2.webp'},handleClick1(){this.width = '500px';this.height = '500px';}}});
</script>

4.2 用属性指令切换图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>属性指令</h1><div><button @click="handleClick">点我，有风景</button><br><button @click="handleClick1">点我，变大风景</button><br>
<!--        <img v-bind:src="img_url" v-bind:width="width" v-bind:height="height">--><p>属性简写，就是把 v-bind: 简写成 : </p><img :src="img_url" :width="width" :height="height"></div><hr><h1>点击按钮，切换图片</h1><button @click="handleChange">点我换风景</button><br><img :src="img_url2" width="400px" height="400px"></div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {img_url: '',width: 300,height: 300,img_url2: './img/2.webp',img_list: ['./img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg', './img/5.webp', './img/6.webp']},methods: {handleClick(){this.img_url = './img/2.webp'},handleClick1(){this.width = '500px';this.height = '500px';},handleChange(){this.img_url2 = this.img_list[Math.floor(Math.random() *  this.img_list.length)]}}});</script>

4.3 属性指令之 class 属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><style>.red {color: rgba(255, 104, 104, 0.7);}.purple {color: rgba(104, 104, 255, 0.7);}</style>
</head>
<body>
<div id="app"><h2>class属性</h2><button @click="handleChangeClass">点我变样式</button><div :class="isActive ? 'red': 'purple'"><h1>我是一个div</h1></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {isActive: false},methods: {handleChangeClass(){this.isActive = !this.isActive},}});
</script>

5 style和class

5.1 style是字符串类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><div :style="style_str"><button @click="handleSmall">点击变细</button><p>我是div中的p标签</p></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// style是字符串类型style_str: 'background: red; font-size: 60px; font-weight: bold',},methods: {handleSmall(){this.style_str = 'background: red; font-size: 60px;'}}});
</script>

5.2 style是数组类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><div :style="style_list"><button @click="handleSmall">点击变细</button><p>我是div中的p标签</p></div></div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// style是数组类型style_list: [{background: 'red'},{'font-size': '60px'},{'font-weight': 'bold'}]},methods: {handleSmall(){this.style_list.pop()}}});</script>

5.3 style是对象类型(推荐使用)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><div :style="style_obj"><button @click="handleSmall">点击变细</button><button @click="handleFontSmall">点击字体变小</button><p>我是div中的p标签</p></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// style:是对象类型(建议用对象，对象好控制)style_obj:{background: 'red', fontSize: '60px', fontWeight: 'bold'},},methods: {handleFontSmall(){this.style_obj.fontSize = '30px'}}});
</script>

5.4 class是字符串类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><style>.big{font-size: 60px;}.back{background-color: greenyellow;}</style>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><h2>class绑定字符串、数组、对象</h2><div :class="class_str"><button @click="handleRemoveBackgroud">点击去掉背景</button><p>我是div中的p标签</p></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// class是字符串类型class_str: 'big back'},methods: {handleRemoveBackgroud(){this.class_str='big'}}});
</script>

5.5 class是数组类型(推荐使用)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><style>.big{font-size: 60px;}.back{background-color: greenyellow;}</style>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><h2>class绑定字符串、数组、对象</h2><div :class="class_list"><button @click="handleRemoveBackgroud">点击去掉背景</button><button @click="handleBigFont">点击字体变大</button>--><p>我是div中的p标签</p></div>
</div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// class是数组类型class_list: ['big', 'back'],},methods: {handleRemoveBackgroud(){this.class_list.pop()},handleBigFont(){this.class_list.push('big')},}});
</script>

5.6 class是对象类型

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><style>.big{font-size: 60px;}.back{background-color: greenyellow;}</style>
</head>
<body>
<div id="app"><h1>style和class:能够绑定什么类型的变量：字符串，数组，对象</h1><h2>class绑定字符串、数组、对象</h2><div :class="class_obj"><button @click="handleSmallFont">点击字体变小</button><p>我是div中的p标签</p></div></div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {// class是对象类型class_obj:{big: true, back: true}},methods: {handleSmallFont(){this.class_obj.big = false}}});</script>

6 条件渲染

条件关键字：v-if v-else-ifv-else代码案例：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script>
</head>
<body>
<div id="app"><h1>条件渲染</h1><span v-if="score >= 90">优秀</span><span v-else-if="score >= 80 && score < 90">良好</span><span v-else-if="score >= 60 && score < 80">及格</span><span v-else>不及格</span></div>
</body>
</html>
<script>let vm = new Vue({el: '#app',data: {score: 82},});</script>

7 列表渲染

# 列表渲染   v-for  显示多行# 购物车案例+bootstrap

列表渲染案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app"><div class="container-fluid"><div class="row"><div class="col-md-6 col-md-offset-3"><div class="text-center"><button class="btn btn-danger" @click="handleShow">点我显示购物车</button><button class="btn btn-danger" @click="handleDelete">删除最后一条</button></div><table class="table table-bordered"><thead><tr><th>id号</th><th>商品名字</th><th>商品价格</th><th>商品数量</th></tr></thead><tbody><tr v-for="item in good_list"><th scope="row">{{item.id}}</th><td>{{item.name}}</td><td>{{item.price}}</td><td>{{item.count}}</td></tr></tbody></table></div></div></div></div></div>
</body><script>var vm = new Vue({el: '#app',data: {good_list: []},methods: {handleShow() {this.good_list = [{id: 1, name: '钢笔', price: 9.9, count: 4},{id: 2, name: '足球', price: 99, count: 4},{id: 3, name: '篮球', price: 44, count: 32},{id: 4, name: '电脑', price: 1299, count: 48},{id: 5, name: '鼠标', price: 23, count: 4},{id: 6, name: '脸盆', price: 8, count: 4},]},handleDelete() {this.good_list.pop()}}})</script>
</html>

7.2 v-for能循环的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app"><div class="container-fluid"><div class="row"><div class="col-md-6 col-md-offset-3"><h1>循环数组--》见过了</h1><p v-for="(value,index) in girls">第 {{index + 1}}个女神是：{{value}}</p><h1>循环对象</h1><p v-for="(value,key) in userinfo">key值是：{{key}}，value值是：{{value}}</p><h1>循环字符串</h1><p v-for="(value,index) in s">第 {{index}}个字母是：{{value}}</p><h1>循环数字</h1><p v-for="i in 10">{{i}}</p></div></div></div></div></div>
</body><script>var vm = new Vue({el: '#app',data: {girls: ['刘亦菲', '迪丽热巴', '高圆圆'],userinfo: {name: 'lqz', age: 19, hobby: '篮球'},s: 'hello world'},methods: {}})</script>
</html>

作业

# 把今天讲的所有内容，都敲一遍
-------# 获取所有图书接口，vue+bootstrap+jquery的ajax，显示在前端-跨域问题# 把uniapp，开发工具hbuilder下载，点击切换美女图片---》打包成安装apk---》安装到自己手机上

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

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

相关文章

Python+Django前后端分离

Python+Django前后端分离

程序示例精选 PythonDjango前后端分离 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjango前后端分离》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应…
阅读更多...
VPN协议是如何工作的

VPN协议是如何工作的

VPN&#xff0c;全名 Virtual Private Network&#xff0c;虚拟专用网&#xff0c;就是利用开放的公众网络&#xff0c;建立专用数据传输通道&#xff0c;将远程的分支机构、移动办公人员等连接起来。 VPN 通过隧道技术在公众网络上仿真一条点到点的专线&#xff0c;是通过利用…
阅读更多...
电脑桌面透明便签软件是哪个？

电脑桌面透明便签软件是哪个？

在现代快节奏的工作环境中&#xff0c;许多上班族都希望能够在电脑桌面上方便地记录工作资料、重要事项、工作流程等内容。为了解决这个问题&#xff0c;一款优秀的电脑桌面便签软件是必不可少的。在选择桌面便签软件时&#xff0c;许多用户也希望便签软件能够与电脑桌面壁纸相…
阅读更多...
携手共赴数智未来|维视智造出席2023英特尔工业物联网大会

携手共赴数智未来|维视智造出席2023英特尔工业物联网大会

​ ​ 9月20日&#xff0c;“数智芯生力” 2023 英特尔工业物联网大会”于上海隆重举办。作为主办方&#xff0c;英特尔邀请了赋能工业数字化技术创新的多位合作伙伴&#xff0c;展示当前中国工业物联网领域的优秀技术与成果&#xff0c;共聚一堂积极探讨数字化机器视觉、控制…
阅读更多...
【Maven】SpringBoot多模块项目利用reversion占位符,进行版本管理.打包时版本号不能识别问题

【Maven】SpringBoot多模块项目利用reversion占位符,进行版本管理.打包时版本号不能识别问题

问题原因&#xff1a; 多模块项目使用reversion点位符进行版管理&#xff0c;打包时生成的pom文件未将 {reversion}占位符替换为真实版本号。 而当子模块被依赖时&#xff0c;引入的pom文件中版本号是&#xff1a;{reversion}。而根据这个版本号去找相应父模块时肯定是找不到的…
阅读更多...
了解:组件和组件的值的分享

了解:组件和组件的值的分享

<template><Block title"热门公司"><div slot"content" class"container"><CompanyList :company-list"currentPageCompany"></CompanyList><div class"pagination"><el-pagination…
阅读更多...
十四、MySql的用户管理

十四、MySql的用户管理

文章目录 一、用户管理二、用户&#xff08;一&#xff09;用户信息&#xff08;二&#xff09;创建用户1.语法&#xff1a;2.案例&#xff1a; &#xff08;三&#xff09; 删除用户1.语法&#xff1a;2.示例&#xff1a; &#xff08;四&#xff09;修改用户密码1.语法&#…
阅读更多...
【LeetCode热题100】接雨水+无重复字符的最长子串+找到字符串中所有字母异位词

【LeetCode热题100】接雨水+无重复字符的最长子串+找到字符串中所有字母异位词

42.接雨水 思路&#xff1a; 按照列计算 每列的宽度是1 所以每列承接雨水即为雨水的高度 这一列高度通过看图计算我们可以得到hmin(lh,rh)-h[i] lh是这一列左侧最高柱子的高度&#xff0c;rh为这一列右侧最高柱子的高度 当遇到第一个和最后一个时我们不计算雨水&#xff08;装…
阅读更多...
11:STM32---spl通信

11:STM32---spl通信

目录 一:SPL通信 1:简历 2:硬件电路 3:移动数据图 4:SPI时序基本单元 A : 开/ 终条件 B:SPI时序基本单元 A:模式0 B:模式1 C:模式2 D:模式3 C:SPl时序 A:发送指令 B: 指定地址写 C:指定地址读 二: W25Q64 1:简历 2: 硬件电路 3:W25Q64框图 4: Flash操作注意…
阅读更多...
阿里云服务器u1和经济型e系列性能差异？哪个比较好？

阿里云服务器u1和经济型e系列性能差异？哪个比较好？

阿里云服务器经济型e实例和云服务器u1有什么区别&#xff1f;同CPU内存配置下云服务器u1性能更强&#xff0c;u1实例价格也要更贵一些。经济型e实例属于共享型云服务器&#xff0c;不同实例vCPU会争抢物理CPU资源&#xff0c;并导致高负载时计算性能波动不稳定&#xff0c;而云…
阅读更多...
docker启动mysql服务

docker启动mysql服务

创建基础文件 mkdir mysql mkdir -p mysql/data获取默认的my.cnf docker run -name mysql -d -p 3306:3306 mysql:latest docker cp mysql:/etc/my.cnf ./vim mysql/my.cnf # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/8.1/en/se…
阅读更多...
人声分离网站，帮你快速提取视频中的人声和背景音乐

人声分离网站，帮你快速提取视频中的人声和背景音乐

今天给大家带来一个可以分离人声的网站——音分轨&#xff0c;他运用人工智能算法可以将音频中的人声部分和音乐部分分离&#xff0c;使我们的视频制作过程可以更方便。 我们点击右下角“选择文件”上传一个音频&#xff0c;上传好音频后&#xff0c;人工智能就开始处理我们上传…
阅读更多...
PostgreSQL 16数据库的yum、编译、docker三种方式安装——筑梦之路

PostgreSQL 16数据库的yum、编译、docker三种方式安装——筑梦之路

一、 docker方式 docker pull postgres:16.0docker rm -f lhrpg16docker run --name lhrpg16 -h lhrpg16 -d -p 54329:5432 -e POSTGRES_PASSWORDlhr -e TZAsia/Shanghai postgres:16.0docker exec -it lhrpg16 bashdocker exec -it lhrpg16 psql -U postgres -d postgressele…
阅读更多...
ESP32主板-MoonESP32

ESP32主板-MoonESP32

产品简介 Moon-ESP32主板&#xff0c;一款以双核芯片ESP32-E为主芯片的主控板&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;低功耗&#xff0c;板载LED指示灯&#xff0c;引出所有IO端口&#xff0c;并提供多个I2C端口、SPI端口、串行端口&#xff0c;方便连接&#xff0c;…
阅读更多...
根据条件关闭软件

根据条件关闭软件

使用下载工具时&#xff0c;经常出现磁盘空间已满&#xff0c;无法下载的情况。 使用shell写一个监控&#xff0c;每2分钟执行一次。判断当前磁盘的空间&#xff0c;低于2G时&#xff0c;关闭下载软件。 获取空间大小 ➜ ~ df -h …
阅读更多...
2023百度之星 题目详解 公园+糖果促销

2023百度之星 题目详解 公园+糖果促销

2023百度之星题目详解 文章目录 2023百度之星题目详解前言公园问题题目详解 夏日漫步问题问题详情题目详解 前言 这里为大家带来最新的2023百度之星的题目详解&#xff0c;后续还会继续更新&#xff0c;喜欢的小伙伴可以点个关注啦&#xff01; 公园问题 今天是六一节&#…
阅读更多...
OceanBase杨传辉传递亚运火炬：国产数据库为“智能亚运”提供稳稳支持

OceanBase杨传辉传递亚运火炬：国产数据库为“智能亚运”提供稳稳支持

9 月 14 日&#xff0c;亚运火炬传递到了浙江台州&#xff0c;OceanBase 的 CTO 杨传辉作为火炬手交接了第 89 棒火炬。 2010 年&#xff0c;杨传辉作为创始成员之一参与自研原生分布式数据库 OceanBase。十年磨一剑&#xff0c;国产数据库 OceanBase 交出了一张优秀的成绩单&a…
阅读更多...
若依cloud -【 100 ~ 】

若依cloud -【 100 ~ 】

100 分布式日志介绍 | RuoYi 分布式日志就相当于把日志存储在不同的设备上面。比如若依项目中有ruoyi-modules-file、ruoyi-modules-gen、ruoyi-modules-job、ruoyi-modules-system四个应用&#xff0c;每个应用都部署在单独的一台机器里边&#xff0c;应用对应的日志的也单独存…
阅读更多...
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒，并提供右上角的红字数字提醒（三）

基于若依ruoyi-nbcio增加flowable流程待办消息的提醒，并提供右上角的红字数字提醒（三）

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 1、上一节说到RedisReceiver &#xff0c;这里有调用了NbcioRedisListener自定义业务监听&#xff0c;如下…
阅读更多...
「UG/NX」Block UI 指定方位SpecifyOrientation

「UG/NX」Block UI 指定方位SpecifyOrientation

✨博客主页何曾参静谧的博客📌文章专栏「UG/NX」BlockUI集合📚全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C+&#
阅读更多...
最新文章

Copyright @ 2022~2023