Vue3样式绑定

文章目录

  • Vue3样式绑定
    • 1. class 属性绑定
      • 1.1 v-bind:class 设置一个对象，从而动态的切换 class
      • 1.2 在对象中传入更多属性用来动态切换多个 class
      • 1.3 直接绑定数据里的一个对象
      • 1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式
      • 1. 5 数据语法
      • 1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类
    • 2. Vue.js style(内联样式)
      • 2.1 v-bind:style 直接设置样式
      • 2.2 直接绑定到一个样式对象
      • 2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上
      • 2.4 多重值
    • 3. 组件上使用 class 属性
      • 3.1 带有单个根元素的自定义组件上使用 class 属性
      • 3.2 组件有多个根元素

Vue3样式绑定

1. class 属性绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。

v-bind:class 可以简写为 :class。

1.1 v-bind:class 设置一个对象，从而动态的切换 class

  • 实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:class 设置一个对象，从而动态的切换 class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {width: 100px;height: 100px;background: green;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive}"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="active"></div>

    在这里插入图片描述

1.2 在对象中传入更多属性用来动态切换多个 class

  • :class 指令也可以与普通的 class 属性共存

  • 实例：text-danger 类背景颜色覆盖了 active 类的背景色：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        v-bind:class可以缩写为 :class --><div :class="{'active': isActive, 'text-danger': hasError}" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {// isActive为false则不显示isActive: false,hasError: true}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

  • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。
    在这里插入图片描述

1.3 直接绑定数据里的一个对象

  • text-danger 类背景颜色覆盖了 active 类的背景色

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 直接绑定数据里的一个对象</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     返回类型为一个对象classObject: {// isActive为false则不显示// isActive: true,'active': false,'text-danger': true}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

  • 以上实例 div class 渲染结果为：

    <div class="text-danger static"></div>

    在这里插入图片描述

    • 当 isActive 或者 hasError 变化时，class 属性值也将相应地更新。例如，如果 active 的值为 true，class 列表将变为 "static active text-danger"。

在这里插入图片描述

1.4 绑定一个返回对象的计算属性。这是一个常用且强大的模式

  • 也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 绑定一个返回对象的计算属性。这是一个常用且强大的模式</title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="classObject" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,error: null}},//     定义计算属性 为一个对象computed: {classObject () {// 定义对象返回值return {active: this.isActive && !this.error,'text-danger': this.error && this.error.type === 'fatal'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

  • 以上代码的渲染结果为：

    <div class="active static"></div>

    在这里插入图片描述

1. 5 数据语法

  • 可以把一个数组传给 v-bind:class，实例如下:

    <div :class="[activeClass, errorClass]" class="static"></div>

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存 可以把一个数组传给 v-bind:class </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[activeClass, errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码渲染结果：<div class="active text-danger static"></div>

    在这里插入图片描述

1.6 errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例 在对象中传入更多属性用来动态切换多个 class:class 指令也可以与普通的 class 属性共存errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
<!--    定义样式--><style>.active {background: green;}.static {width: 100px;height: 100px;}.text-danger {background: red;}</style>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用v-bind:class 在div中使用class属性 -->
<!--        <div v-bind:class="{'active': isActive}"></div>-->
<!--        直接绑定对象 v-bind:class可以缩写为 :class --><div :class="[isActive ? activeClass : errorClass]" class="static"></div>
<!--        静态绑定class-->
<!--        <div class="active"></div>--></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     定义返回值isActive: true,activeClass: 'active',errorClass: 'text-danger'}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：isActive为true显示绿色，isActive为false显示红色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 以上实例的渲染结果:<div class="active static"></div>

    在这里插入图片描述

2. Vue.js style(内联样式)

2.1 v-bind:style 直接设置样式

  • 可以在 v-bind:style 直接设置样式，可以简写为 :style
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {activeColor: 'red',fontSize: 30}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

页面效果：
在这里插入图片描述
在这里插入图片描述

  • 以上代码渲染结果为:<div style="color: red; font-size: 30px;">v-bind:style 直接设置样式</div>

    在这里插入图片描述

2.2 直接绑定到一个样式对象

  • 也可以直接绑定到一个样式对象，让模板更清晰：

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 直接设置样式 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="styleObject">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象styleObject: {color: "red",fontSize: "30px"}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码的渲染结果：<div style="color: red; font-size: 30px;">v-bind:style 绑定样式对象</div>
    在这里插入图片描述

2.3 v-bind:style 可以使用数组将多个样式对象应用到一个元素上

  • v-bind:style 可以使用数组将多个样式对象应用到一个元素上

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  v-bind:style 可以使用数组将多个样式对象应用到一个元素上 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        v-bind:style 直接设置样式 -->
<!--        <div v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}">v-bind:style 直接设置样式</div>-->
<!--        v-bind:style 直接设置样式 可以简写为 :style--><div :style="[baseStyles, overridingStyle]">v-bind:style 绑定样式对象</div></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = {data () {return {//     设置返回结果为一个样式对象baseStyles: {color: "green",fontSize: "30px"},overridingStyle: {'font-weight': 'bold'}}}}//     创建HelloVueApp应用 并挂载到名为app的div上Vue.createApp(HelloVueApp).mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述

  • 上述案例渲染结果：<div style="color: green; font-size: 30px; font-weight: bold;">v-bind:style 绑定样式对象</div>

    在这里插入图片描述

  • 注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

2.4 多重值

  • 可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

  • 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

3. 组件上使用 class 属性

3.1 带有单个根元素的自定义组件上使用 class 属性

  • 当在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classC classD"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件
// 在自定义组件上使用class属性，这些属性会被添加到该元素上HelloVueApp.component('runoob', {template: '<h1 class="classA classB">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>'})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述

    在这里插入图片描述
    以上实例渲染结果：<h1 class="classA classB classC classD">在自定义组件上使用class属性，这些属性会被添加到该元素上</h1>
    在这里插入图片描述

  • 对于带数据绑定 class 也同样适用：

    <my-component :class="{ active: isActive }"></my-component>

  • 当 isActive 为 true 时，HTML 将被渲染成为：

    <p class="active">Hi</p>

3.2 组件有多个根元素

  • 组件有多个根元素，需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作

    template 中 ` 是反引号，不是单引号 ’

    <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Vue 测试实例  组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作 </title><script src="https://cdn.staticfile.org/vue/3.2.37/vue.global.min.js"></script><script src="https://unpkg.com/vue@next"></script>
</head>
<body><!--定义一个名为app的div--><div id="app" class="demo">
<!--        使用自定义的全局组件runoob--><runoob class="classA"></runoob></div><script>
//    定义Vue应用HelloVueAppconst HelloVueApp = Vue.createApp({})//     在HelloVueApp组件上创建一个新全局组件 含多个根元素HelloVueApp.component('runoob', {template: `<p :class="$attrs.class">组件有多个根元素 使用 $attrs 组件属性执行此操作</p><span>这是runoob的子组件</span>`})//     创建HelloVueApp应用 并挂载到名为app的div上HelloVueApp.mount('#app')</script>
</body>
</html>

    页面效果：
    在这里插入图片描述
    在这里插入图片描述

  • 以上代码渲染结果：

    <p class="classA">组件有多个根元素 使用 $attrs 组件属性执行此操作</p>
<span>这是runoob的子组件</span>

    在这里插入图片描述

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

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

相关文章

JAsper：专注于营销领域的AIGC

JAsper：专注于营销领域的AIGC

【产品介绍】 Jasper 由 Dave Rogenmoser&#xff08;CEO&#xff09;、Chris Hull&#xff08;COO&#xff09;和 John Phillip Morgan&#xff08;CTO&#xff09;在2021 年成立&#xff0c;是一款领先的 AI 营销工具以及写作助手。整个jasper官网都会强调自己对营销领域的理…
阅读更多...
了解冒泡排序

了解冒泡排序

package com.mypackage.array;import java.util.Arrays;public class Demo07 {public static void main(String[] args) {int[] a {3,2,6,7,4,5,6,34,56,7};int[] sort1 sort1(a); //调用我们自己写的排序方法后&#xff0c;返回一个排序后的数组System.out.println(Array…
阅读更多...
Spring Boot 下载文件(word/excel等)文件名中文乱码问题｜构建打包不存在模版文件(templates等)

Spring Boot 下载文件(word/excel等)文件名中文乱码问题｜构建打包不存在模版文件(templates等)

Spring Boot 下载文件(word/excel等)文件名中文乱码问题&#xff5c;构建打包不存在模版文件(templates等) 准备文件&#xff0c;这里我放在resource下的templates路径 在pom中配置构建打包的资源&#xff0c;更新maven 如果使用了assembly打包插件这样配置可能仍不生效&#…
阅读更多...
台积电的战略布局：“曲线”抢单 | 百能云芯

台积电的战略布局：“曲线”抢单 | 百能云芯

郭明錤最新的分析引发了广泛关注&#xff0c;他指出台积电采取了一系列重大战略投资举措&#xff0c;旨在争夺未来的半导体订单&#xff0c;尤其是来自苹果和英伟达的12纳米订单。这些战略举措包括认购英特尔手中的IMS Nanofabrication Global股权以及投资安谋&#xff08;Arm&…
阅读更多...
Linux：基础开发工具之yum，vim，gcc的使用

Linux：基础开发工具之yum，vim，gcc的使用

文章目录 yumvimgcc 本篇主要总结的是Linux下开发工具 yumvimgcc/g yum 什么是yum&#xff1f; 不管是在手机移动端还是pc端&#xff0c;不管是什么操作系统&#xff0c;当用户想要下载一些内容或者工具的时候&#xff0c;都需要到一个特定的位置进行下载&#xff0c;例如在…
阅读更多...
点云从入门到精通技术详解100篇-从全局到局部的三维点云细节差异分析

点云从入门到精通技术详解100篇-从全局到局部的三维点云细节差异分析

目录 前言 国内外研究现状 细节差异分析相关研究 三维点云的相似性相关研究 存在的问题 三维点云对比的相关技术 2.1 三维点云的采集设备 2.2三维点云的存储格式 2.3三维点云的空间变换 2.4三维点云相似度分析 2.4.1点云特征的提取 2.4.2特征相似度计算 本文篇幅较长&#xff0…
阅读更多...
获取Windows 10中的照片（旧版）下载

获取Windows 10中的照片（旧版）下载

Windows 10中的新版照片应用&#xff0c;目前发现无法直接打开部分iOS设备上存储的照片。需要使用照片&#xff08;旧版&#xff09;才行。 但目前应用商店中无法直接搜索到照片&#xff08;旧版&#xff09;&#xff0c;因此笔者提供如下链接&#xff0c;可以直接访问并呼出W…
阅读更多...
PostgreSQL数据库IPC——SI Message Queue

PostgreSQL数据库IPC——SI Message Queue

SI Message Queue代码位于src/backend/storage/ipc/sinvaladt.c和src/backend/storage/ipc/sinval.c文件中&#xff0c;属于PostgreSQL数据库IPC进程间通信的一种方式【之前介绍过PostgreSQL数据库PMsignal——后端进程\Postmaster信号通信也是作为PostgreSQL数据库IPC进程间通…
阅读更多...
Ubuntu安装Android Studio

Ubuntu安装Android Studio

一、Android Studio安装 官方教程&#xff1a;安装 Android Studio | Android Developers 1、下载&#xff1a;Download Android Studio & App Tools - Android Developers&#xff0c;选择linux版本 2、 提取/解压 将下载的安装包提取出来 3、 64位ubuntu系统&#…
阅读更多...
vite+react 使用 react-activation 实现缓存页面

vite+react 使用 react-activation 实现缓存页面

对应的版本 "react": "^18.2.0", "react-activation": "^0.12.4", "react-dom": "^18.2.0", "react-router-dom": "^6.15.0",react-activation 这是一个npm包&#xff0c;在react keep alive…
阅读更多...
想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目

想要精通算法和SQL的成长之路 - 受限条件下可到达节点的数目 前言一. 相交链表&#xff08;邻接图和DFS&#xff09; 前言 想要精通算法和SQL的成长之路 - 系列导航 一. 相交链表&#xff08;邻接图和DFS&#xff09; 原题链接 public int reachableNodes(int n, int[][] ed…
阅读更多...
《算法竞赛·快冲300题》每日一题：“点灯游戏”

《算法竞赛·快冲300题》每日一题：“点灯游戏”

《算法竞赛快冲300题》将于2024年出版&#xff0c;是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码&#xff0c;以中低档题为主&#xff0c;适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 点…
阅读更多...
【精品】商品规格 数据库表 设计

【精品】商品规格 数据库表 设计

特点 同一类商品的规格项分组一样同一类商品的规格项一样不同商品的规格值是不同的 规格参数规格组规格项&#xff1a;规格值本博客对应的SQL文件下载地址&#xff1a;https://download.csdn.net/download/lianghecai52171314/88306884 方案一 数据库设计 查询17号商品的规…
阅读更多...
flex布局实现 内容区域高度自适应

flex布局实现 内容区域高度自适应

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 一、背景说明 对于纵向排列布局&#xff0c;且上中下个个模块都是自动高度。当我们针对中间部分需要自适应高度且进行滚动时&#xff0c;那我们就可以用flex: 1 来处理。 二 、先看效果图 二 、flex布局 <!DO…
阅读更多...
【C++】day3学习成果：类

【C++】day3学习成果：类

1.自行封装一个栈的类&#xff0c;包含私有成员属性&#xff1a;栈的数组、记录栈顶的变量 成员函数完成&#xff1a;构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求栈的大小 头文件stack.h: #ifndef STACK_H #define STACK_H#include …
阅读更多...
安装配置 zookeeper（单机版）

安装配置 zookeeper（单机版）

目录 一 准备并解压安装包 二 修改zoo.cfg文件 三 创建相应两个目录 四 创建文件myid 五 修改环境变量 六 启动 zookeeper 一 准备并解压安装包 这里提供了网盘资源 http://链接: https://pan.baidu.com/s/1BybwSQ_tQUL23OI6AWxwFw?pwdd4cf 提取码: d4cf 这里的安装包是…
阅读更多...
Mac 安装ZooKeeper+kafka基本使用

Mac 安装ZooKeeper+kafka基本使用

为什么 Kafka 依赖 ZooKeeper? 下面ZooKeeper基本介绍&#xff1a; 1、基本功能 ZooKeeper 为分布式系统提供了一种配置管理的服务&#xff1a;集中管理配置&#xff0c;即将全局配置信息保存在 ZooKeeper 服务中&#xff0c;方便进行修改和管理&#xff0c;省去了手动拷贝…
阅读更多...
Django05_反向解析

Django05_反向解析

Django05_反向解析 5.1 反向解析概述 随着功能的不断扩展&#xff0c;路由层的 url 发生变化&#xff0c;就需要去更改对应的视图层和模板层的 url&#xff0c;非常麻烦&#xff0c;不便维护。这个时候我们可以通过反向解析&#xff0c;将 url解析成对应的 试图函数 通过 path…
阅读更多...
Python语言

Python语言

这里写自定义目录标题 一、首先认识python一、python起源二、python的优缺点 二、python应用场景三、解释型语言与编译型语言四、安装python-3.5.4-amd64五、变量名的要求六、python简单的语句验证一、打开python交互式运行环境idle&#xff0c;在屏幕上打印python的第一个程序…
阅读更多...
移动测试之语音识别功能如何测试？

移动测试之语音识别功能如何测试？

移动测试之语音识别功能如何测试&#xff1f; 要知道语音识别功能如何测试&#xff0c;我们先了解智能产品语音交互流程&#xff1a; 所以&#xff0c;要进行测试的话&#xff0c;我们需要从以下几个维度来准备测试点&#xff1a; 基础功能测试&#xff1a; 1、声纹的录入&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023