Vue.js开发基础

单文件组件

使用Vite创建Vue项目后,目录结构中包含一些扩展名为.vue的文件,每个.vue文件都可用来定义一个单文件组件Vue中的单文件组件是Vue组件的文件格式。每个单文件组件由模板、样式和逻辑3个部分构成

运行结果:

1.模板

        模板用于搭建当前组件DOM结构,其代码写在<template>标签中。<template>标签是Vue提供的容器标签,只起到包裹作用,他不会被渲染成真正的DOM元素。每个单文件组件最多可以包含一个顶层<template>标签。

        在 Vue 3 中,<template>标签中的DOM结构可以有多个根节点;而在Vue 2中,<template>标签中的 DOM 结构只能有一个根节点,即<template>标签中的所有元素最外层必须有唯一的根节点进行包裹,否则会报错。

2.样式

      样式是指通过CSS代码为当前组件设置样式,其代码写在<style>标签中。每个单文件
组件中可以包含多个<style>标签
。如果当前组件不需要样式,则可以省略<stle>标签。

3.逻辑

       逻辑是指通过JavaScript代码处理组件的数据与业务,其代码写在<script>标签中。每个单文件组件只能包括一个<script>标签。每个单文件组件只能包含一个<seript>标签。如果当前组件没有逻辑代码且存在<template>标签,则可以省略<script>标签。

定义一个基本的单文件组件,示例代码如下:

<template><div class="demo">Demo组件</div>
</template><script>
</script><style>.demo{font-size: 22px;font-weight: bold;}
</style>

数据绑定

   当页面中有大量的数据需要改变,且这些数据分布在页面的不同位置时,如果使用原生 JavaScnipt进行操作,代码会非常烦琐,而使用 Vue的数据绑定功能则可以更轻松地完成这样的工作。

初始数据绑定

      Vue 通过数据绑定实现了数据与页面相分离,从而实现了数据驱动视图的效果。假设在个图书商城项目中,图书商城页面中需要展示大量的图书,并且每本图书都需要有单独的图书详情页面。如果开发者为每本图书专门编写一个页面,显然是不现实的,所以开发者通常只编写一个图书详情页面的模板,通过改变页面中的数据来实现展示不同的图书详情页面。在 Vue 中,这样的开发方式就是将页面中的数据分离出来,放到组件的<script>标签中,通过程序操作数据,并且当数据改变时,页面会自动发生改变

     数据绑定分为定义数据和输出数据

1.定义数据

     由于数据和页面是分离的,在实现数据显示之前,需要先在<script>标签中定义组件所需的数据,具体语法格式如下

<script>
export default{
setup(){
return{
数据名:数据值,
......
}
}
}
</script>

       在上述语法格式中,<script>中的代码会在每次组件实例被创建的时候执行,其中第2行代码中的 export default 是模块导出语法;第3~8行代码中的 setup( )函数是 Vue 3特有的,该函数是组合式 API的起点,在函数中可以定义数据和方法,并且需要通过return关键字返回一个对象,用于将对象中的数据暴露给模板和组件实例;第4~1行代码定义了要返回的对象,该对象中的数据就是页面中显示的数据。

       为了让代码更简洁,Vue 3提供了 setup语法糖(Syntactic Sugar),使用它可以简化上述语法,提高开发效率。如果要使用setup语法糖,需要在<scrpt>标签上添加 setup 属性。下面使用 setup 语法糖简化上述语法,简化后的语法格式如下:

<script setup>
const 数据名=数据值//定义页面中显示的数据
</script>

2.输出数据

       Vue 为开发者提供了Mustache 语法(又称为双大括号语法),该语法需要写在<template>标签中,使用该语法时相当于在模板中放入占位符,其语法格式如下:

{{数据名}}

       当页面渲染时,模板中的{{数据名}}会被替换为实际的数据。需要注意的是,如果给定的数据是一个包含HTML标签的字符串,这些HTML标签会被当成纯文本输出。
在 Mustache 语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型,示例代码如下:

<template><div class="demo">{{message}}</div>
</template><script setup>//数据绑定,语法糖,{{}}是双大括号语法const message='床前明月光,疑是地上霜。'
</script><style>.demo{font-size: 22px;font-weight: bold;color: red;}
</style>

将 Vue 引l入 HTML 页面中

      其实 Vue 的使用方式非常灵活,它还提供了另一种使用方式,就是将 Vue 引入HTML 页面中。但这种方式只能使用Vue的核心功能,所以只适合开发一些简单的页面,在实际开发中一般不用这种方式。

响应式数据绑定

      将数据定义出来并在页面中显示后,如果后续修改了数据,则页面中显示的数据不会同步更新。具体代码如下:

<template>{{message}}
</template>
<script setup>
let message='不积硅步,无以至千里'
setTimeout(() => {console.log('更新前的message:'+message)message='长风破浪会有时,直挂云帆济沧海'console.log('更新后的message:'+message)
},2000)
</script>

     想要实现页面中数据的更新,则需要进行响应式数据绑定,也就是将数据定义成应式数据。Vue 为开发者提供了 ref()函数、reactive()函数、toRef()函数和 toRefs()函数用于定义响应式数据。

1.ref()函数

ref()函数用于将数据转换成响应式数据,其参数为数据,返回值为转换后的响应式数据

具体代码如下:

<template>{{message}}
</template><script setup>//第二行{{}}是双大括号语法import { ref } from "vue"//导入ref()函数const message=ref('会当凌绝顶,一览众山小')//定义响应式数据setTimeout(()=>{//设置定时器message.value='锲而不舍,金石可镂'},2000)//2000毫秒等于2秒,2秒后更改
</script><style>
</style>

2.reactive()函数

reactive()函数用于创建一个响应式对象或数组,将普通的对象或数组作为参数传给该函数即可

使用reactive()函数定义响应式数据的语法格式如下。

响应式对象或数组 = reactive(普通的对象或数组)

创建src\components\Reactive.vue文件,代码如下:

<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼,自缘身在最高层' })
setTimeout(() => {obj.message = '欲穷千里目,更上一层楼'
}, 2000)
</script>
运行结果

3.toRef()函数

toRef()函数用于将响应式对象中的单个属性转换为响应式数据。

创建src\components\ToRef.vue文件,示例代码如下

<template><div>message的值:{{ message }}</div><div>obj.message的值:{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRef } from 'vue'
const obj = reactive({ message: '黑发不知勤学早,白首方悔读书迟' })
const message = toRef(obj, 'message')
setTimeout(() => {message.value = '少壮不努力,老大徒伤悲'
}, 2000)
</script>
运行结果

4.toRefs()函数

toRefs()函数用于将响应式对象中的所有属性转换为响应式数据

创建src\components\ToRefs.vue文件,示例代码如下:

<template><div>message的值:{{ message }}</div><div>obj.message的值:{{ obj.message }}</div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
const obj = reactive({ message: '盛年不重来,一日难再晨' })
let { message } = toRefs(obj)
setTimeout(() => {message.value = '及时当勉励,岁月不待人'
}, 2000)
</script>

运行结果:

指令

    指令是一种在模板中使用的带有 v-前缀的特殊属性,通过指令可以辅助开发者定义页面结构,使用简洁的代码实现复杂的功能。Vue中的指令按照不同的用途可以分为6类分别是内容渲染指令、属性绑定指令、事件绑定指令、双向数据绑定指令、条件渲染指令列表渲染指令

内容渲染指令

内容渲染指令用于渲染 DOM元素的内容。常见的内容染指令有v-textv-html

1.v-text

v-text 用于渲染 DOM 元素的文本内容,如果文本内容中包含 HTML 标签,那么浏览不会对其进行解析。创建src\components\VText.vue文件,示例代码如下:

<template><div v-text="message"></div>
</template>
<script setup>
const message = '<span>咬定青山不放松,立根原在破岩中</span>'
</script>
运行结果

2.v-html

v-html用于渲染 DOM 元素的 HTML内容,其用法与 v-text 相似。创建src\components\VHtml.vue文件,示例代码如下:

<template><div v-html="html"></div>
</template>
<script setup>
const html = '<strong>千磨万击还坚劲,任尔东西南北风</strong>'
</script>
运行结果

属性绑定指令

     在 Vue 开发中,有时需要绑定 DOM 元素的属性,从而更好地控制属性的值,此时可以使用属性绑定指令 v-bind 来实现。“v-bind:”后面是被绑定的属性名,该属性的值与数据名绑定,数据名需要在<script>标签中定义。v-bind 实现了单向数据绑定,当改变数据名的值时,属性值会自动更新;而当属性值改变时,数据名的值不会同步发生改变。另外,v-bind 还有简写形式,可以将“v-bind:属性名”简写为“:属性名”。

v-bind的语法格式如下:

<标签名 v-bind:属性名="数据名"></标签名>

v-bind还支持将属性与字符串拼接表达式绑定,示例代码如下:

<div :id="'list' + index"></div>

创建src\components\VBind.vue文件,代码如下

<template><p><input type="text" v-bind:placeholder="username"></p><p><input type="password" :placeholder="password"></p>
</template>
<script setup>
const username = '请输入用户名'
const password = '请输入密码'
</script>
运行结果

事件绑定指令

在 Vue 开发中,有时需要给 DOM 元素绑定事件,从而利用事件实现交互效果,这时可以利用事件绑定指令 v-on 来实现。示例代码:

<标签名 v-on:事件名="事件处理器"></标签名>

v-on还有简写形式,可以将“v-on:事件名”简写为“@事件名”。

创建src\components\VOn.vue文件,示例代码如下:

<template><button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {console.log('欢迎来到Vue.js的世界!')
}
</script>
运行结果

双向数据绑定指令

在处理表单信息时,经常需要将输入框的值与变量保持同步。通过前面的学习可知,可以通过绑定value属性和input事件来实现。Vue 为开发者提供了 v-model指令来实现双向数据绑定,使用它可以在input、textarea和 select 元素上创建双向数据绑定,它会根据使用的元素自动选取对应的属性和事件组合负责监听用户的输人事件并更新数据。v-model 内部会为不同的元素绑定不同的属性和事件。

v-model内部会为不同的元素绑定不同的属性和事件,具体如下。

textarea 元素和 text 类型的 input 元素会绑定 value 属性和 input 事件。
checkbox 类型的 input 元素和 radio 类型的 input 元素会绑定 checked 属性和 change 事件。
select 元素会绑定 value 属性和 change 事件。

为了方便对用户输入的内容进行处理v-model提供了3个修饰符v-model的修饰符如下表所示。

创建src\components\VModel.vue文件,示例代码如下:

<template>请输入姓名:<input type="text" v-model="username"><div>姓名是:{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>
运行结果

条件渲染指令

条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。条件渲染指今有 v-if和 v-show 两种。

1.v-if

v-if是根据布尔值切换元素的显示或隐藏状态,本质是通过操作 DOM 元素来切换显示状态。当给定的值为tue 时,元素存在于 DOM 树中;当给定的值为false时,元素从 DOM树中移除。

直接给定一个条件,控制单个元素的显示或隐藏

<标签名 v-if="条件"></标签名>

通过v-if结合v-else-ifv-else来控制不同元素的显示或隐藏

<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>

创建src\components\VIf.vue文件,示例代码如下:

<template>小明的学习评定等级为:<p v-if="type === 'A'">优秀</p><p v-else-if="type === 'B'">良好</p><p v-else>差</p><button @click="type = 'A'">切换成优秀</button><button @click="type = 'B'">切换成良好</button><button @click="type = 'C'">切换成差</button>
</template>
<script setup>import { ref } from 'vue'
const type = ref('B')
</script>
运行结果

2.v-show

v-show 与 v-if都用来决定某一个元素是否在页面上显示出来。v-show 的原理是通过为元素添加或移除 display: none 样式来实现元素的显示或隐藏。

创建src\components\VShow.vue文件,示例代码如下:

<template><p v-if="flag">通过v-if控制的元素</p><p v-show="flag">通过v-show控制的元素</p><button @click="flag = !flag">显示/隐藏</button>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(true)
</script>
运行结果

列表渲染指令

Vue 提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构,v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。

使用v-for(根据list数组中的元素)渲染列表后,当在list数组中删除一个元素后,index会发生变化v-for会重新渲染列表,导致性能下降。

为了给v-for一个提示,以便它能跟踪每个节点的身份,从而对现有元素进行重用和重新排序,建议通过key属性列表中的每一项提供具有唯一性的值,示例代码如下:

<div v-for="item in items" :key="item.id"></div>

创建src\components\VFor1.vue文件,示例代码如下:

<template><div v-for="(item, index) in list" :key="index">索引是:{{ index }} --- 元素的内容是:{{ item }}</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive(['HTML', 'CSS', 'JavaScript'])
</script>
运行结果

使用v-for根据对象数组渲染列表

创建src\components\VFor2.vue文件,示例代码如下:

<template><div v-for="item in list" :key="item.id">id是:{{ item.id }} --- 元素的内容是:{{ item.message }}</div>
</template>
<script setup>
import { reactive } from 'vue'
const list = reactive([{ id: 1, message: '梅', }, { id: 2, message: '兰', },{ id: 3, message: '竹', }, { id: 4, message: '菊', }
])
</script>
运行结果

使用v-for根据对象渲染列表

创建src\components\VFor3.vue文件,示例代码如下:

<template><div v-for="(value, name) in user" :key="name">属性名是:{{ name }} --- 属性值是:{{ value }}</div>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ id: 11, name: '小明', gender: '男' })
</script>
运行结果

事件对象

1.通过事件方法的参数来获取事件对象

v-on绑定的用于处理事件方法中,可以接收一个参数,这个参数就是事件对象,示例代码如下。

<template><button @click="greet">Greet</button>
</template>
<script setup>
const greet = event => console.log(event)
</script>

事件对象的使用方法

创建src\components\EventObject.vue文件,示例代码如下

<template><div>count的值为:{{ count }}</div><button @click="addCount">count+1</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(1)
const addCount = event => {count.value++if (count.value % 2 === 0) { event.target.style.border = '3px dotted' } else { event.target.style.border = '3px solid' } }
</script>
运行结果

2.通过$event获取事件对象

$eventVue提供的内置变量,使用它可以获取事件对象,示例代码如下。

<template><button @click="change($event)">change</button>
</template>
<script setup>
const change = event => console.log(event)
</script>

通过$event获取事件对象的方式

修改src\components\EventObject.vue文件,编写addCountN()方法,示例代码如下

const addCountN = (n, event) => {count.value += nif (count.value % 2 === 0) {event.target.style.border = '3px dotted'} else {event.target.style.border = '3px solid'}
}
运行结果

事件修饰符

事件修饰符用于修饰事件的行为,写在事件名称之后,多个事件修饰符可以串联使用。

1.阻止默认事件行为

通过.prevent事件修饰符可以实现阻止默认事件行为的功能。例如,在单击<a>标签时页面会自动跳转,这就是<a>标签的默认事件行为。

在实际开发中,如果默认事件行为与事件发生冲突,可以使用.prevent事件修饰符阻止默认事件行为,示例代码如下:

<a href="test.html" v-on:click.prevent>阻止默认行为</a>

2.阻止事件冒泡

通过.stop事件修饰符可以实现阻止事件冒泡的功能,示例代码如下:

<template><div v-on:click="show('我是父元素的事件')"><button v-on:click="show('我是子元素的事件')">事件冒泡</button><button v-on:click.stop="show('我是子元素的事件')">阻止事件冒泡</button></div>
</template>
<script setup>
let show = message => console.log(message)
</script>

3.事件捕获

通过.capture事件修饰符可以实现事件捕获的功能,示例代码如下。

<template><div v-on:click.capture="show('我是父元素的事件')"><button v-on:click="show('我是子元素的事件')">事件捕获</button></div>
</template>
<script setup>
let show = message =>  console.log(message)
</script>

4.使事件只触发一次

通过.once事件修饰符可以实现使事件只触发一次的功能。.once事件修饰符用于阻止事件的多次触发,让事件只触发一次,示例代码如下:

<template><button v-on:click.once ="show('我是当前元素的单击事件且只执行一次')">只执行一次</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

5.使DOM元素只有自身触发事件时才执行事件方法

通过.self事件修饰符可以实现只有DOM元素自身触发事件时才执行事件方法的功能,示例代码如下

<template><div v-on:click="show('我是祖先元素的事件')">祖先元素<div v-on:click.self="show('我是父元素的事件')">父元素<div v-on:click="show('我是子元素的事件')">子元素</div></div></div>
</template>
<script setup>
let show = message => console.log(message)
</script>

6. 监听滚动事件

通过.passive事件修饰符可以实现监听滚动事件的功能。.passive事件修饰符主要用于优化移动端设备的滚屏性能。添加.passive事件修饰符后会优先响应滚动事件而不是滚动事件的回调函数,从而可提升性能。

使用.passive事件修饰符的示例代码如下:

<div v-on:scroll.passive="onScroll"></div>

7. 捕获特定按键

Vue提供了一些用于修饰键盘事件修饰符,使用它们可以捕获特定按键,其中常用的修饰符如下。

  • .enter:捕获Enter键。
  • .esc:捕获Esc键。
  • .tab:捕获Tab键。
  • .delete:捕获DeleteBackspace键。
  • .ctrl:捕获Ctrl键。
  • .alt:捕获Alt键。
  • .shift:捕获Shift
  • .meta:在MacOS系统的键盘上捕获command键;在Windows系统的键盘上捕获Windows徽标键

捕获Enter为例,演示.enter事件修饰符的使用,示例代码如下:

<template> <input type="text" v-on:keyup.enter="submit">
</template>
<script setup>
let submit = () => console.log('捕获到Enter键')
</script>

如果想实现只有按下Enter键时才能触发事件,可以通过.exact修饰符来实现,该修饰符允许控制由精确的系统修饰符组合触发的事件。

修改input元素实现仅有Enter键被按下的时候才触发,示例代码如下:

<input type="text" v-on:keyup.enter.exact="submit">

8. 捕获鼠标按键

Vue中提供了一些用于捕获鼠标按键的事件修饰符,其中常用的修饰符如下

  1. .left:捕获鼠标左键。
  2. .middle:捕获鼠标中键。
  3. .right:捕获鼠标右键。

以捕获鼠标左键为例,演示鼠标按键修饰符的使用,示例代码如下

<template><button v-on:click.left="show('捕获到鼠标左键')">按钮</button>
</template>
<script setup>
let show = message => console.log(message)
</script>

计算属性

计算属性可以实时监听数据变化,返回一个计算后的新值,并将计算结果缓存起来只有计算属性中依赖的数据源变化了,计算属性才会自动重新求值,并重新加入缓存

在组件中使用计算属性,分为以下2个步骤。

1.定义计算属性           2.输出计算属性

1) 定义计算属性

计算属性通过computed()函数定义,该函数的参数为一个回调函数,开发者需要在回调函数中实现计算功能,并在计算完成后返回计算后的数据,语法格式如下:

<script setup>
import { computed } from 'vue'
const 计算属性名 = computed(() => {return 计算后的数据
})
</script>

2)输出计算属性

将计算属性定义好后,可以使用Mustache语法输出计算属性,语法格式如下:

{{ 计算属性名 }}

计算属性的使用方法

创建src\components\Computed.vue文件,代码如下:

<template><p>初始message:{{ message }}</p><p>反转之后的message:{{ reversedMessage }}</p><button @click="updateMessage">更改</button>
</template>
<script setup>
import { ref, computed } from 'vue'
const message = ref('Hello World')
const reversedMessage = computed(() =>message.value.split('').reverse().join('')
)
const updateMessage = () => {message.value = 'hello'
}
</script>
运行结果

侦听器

Vue中,开发者可以自定义方法来进行数据的更新操作,但是不能自动监听数据的状态。如果想在数据更新后进行相应的操作,可以通过侦听器来实现。

侦听器通过watch()函数定义watch()函数的语法格式如下:

watch(侦听器的来源, 回调函数, 可选参数)

watch()函数有3个参数,第1个参数是侦听器的来源,侦听器的来源可以有以下4

①一个函数,返回一个值。

②一个响应式数据。

③一个响应式对象。

④一个由以上类型的值组成的数组。

2个参数是数据发生变化时要调用的回调函数,这个回调函数的第1个参数表示新值,即数据发生变化后的值,第2个参数表示旧值,即数据发生变化前的值

3个参数是可选参数,它是一个对象,该对象有以下2个常用选项。

  • deep:默认情况下,当侦听一个对象时,如果对象中的属性值发生了变化,则无法被监听到。如果想监听到,可以将该选项设为true,表示进行深度监听。该选项的默认值为false,表示不使用该选项。
  • immediate:默认情况下,组件在初次加载完毕后不会调用侦听器的回调函数,如果想让侦听器的回调函数立即被调用,则需要将选项设为true。该选项的默认值为false,表示不使用该选项。

侦听器的使用方法

创建src\components\Watch.vue文件,示例代码如下

<template><input type="text" v-model="cityName">
</template>
<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (newVal, oldVal) => {console.log(newVal, oldVal)
})
</script>
运行结果

样式绑定

Vue中,通过更改元素的class属性可以更改元素的样式,而对class属性的操作可以通过v-bind来实现。

使用v-bind绑定class属性时,可以将class属性值绑定为字符串对象数组

1. 将class属性值绑定为字符串

Vue中,可以class属性值绑定为字符串创建src\components\ClassStr.vue文件,示例代码如下:

<template><div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box {border: 1px solid black;
}
</style>
运行结果

2. 将class属性值绑定为对象

Vue中,可以将class属性值绑定为对象,从而动态地改变class属性值。对象中包含的属性名表示类名属性值布尔类型,如果属性值为true,表示类名生效,否则类名不生效。将class属性值绑定为对象的示例代码如下。

<template><div v-bind:class="{ className: isActive }"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

在使用v-bind绑定class属性时,如果不想将对象类型的class属性值直接写在模板中,可以将属性值定义成一个响应式对象或一个返回对象的计算属性,示例代码如下。

<template><div v-bind:class="classObject1"></div><div v-bind:class="classObject2"></div>
</template>
<script setup>
import { reactive, ref, computed } from 'vue'
const classObject1 = reactive({ className: true })
const isActive = ref(true)
const classObject2 = computed(() => ({className: isActive.value
}))
</script>

如何为class属性绑定对象

创建src\components\ClassObject.vue文件,示例代码如下

<template><div class="text" v-bind:class="{ box: isBox, border: isBorder }"><div v-bind:class="{ inner: isInner }">春夏</div><div v-bind:class="classObject">秋冬</div><div v-bind:class="classMeal">三餐四季~</div></div>
</template>
<script setup>
import { ref, reactive, computed } from 'vue'
const isBox = ref(true)
const isBorder = ref(true)
const isInner = ref(true)
const isMeal = ref(true)
const classObject = reactive({ inner: true })
const classMeal = computed(() => ({meal: isMeal.value
}))
</script>
<style>
.text {text-align: center;line-height: 30px;
}
.box {width: 100%;background: linear-gradient(white, rgb(239, 250, 86));
}
.border {  border: 2px dotted black; }
.inner {margin-top: 2px;width: 100px; height: 30px;border: 2px double black;
}
.meal {width: 100px; height: 30px;border: 2px dashed rgb(120, 81, 227);
}
</style>
运行结果

3. 将class属性值绑定为数组

Vue中,v-bind指令中的class属性值除了字符串对象外,还可以是一个数组用以动态地切换HTMLclass属性,数组中的每个元素为要绑定的类名

class属性值绑定为数组的示例代码如下。

<template><div v-bind:class="[className1, className2]"></div>
</template>
<script setup>
import { ref } from 'vue'
const className1 = ref('active')
const className2 = ref('error')
</script>

如何为class属性绑定数组

创建src\components\ClassArray.vue文件

<template><div v-bind:class="[activeClass, borderClass]"></div><div v-bind:class="[isActive ? activeClass : '', borderClass]"></div><div v-bind:class="[{ active: isActive }, borderClass]"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const activeClass = ref('active')
const borderClass = ref('border')
</script>
<style>
.active {width: 100px;height: 10px;margin-bottom: 2px;background-color: rgb(59, 192, 241);
}
.border {border: 2px solid rgb(0, 0, 0);
}
</style>
运行结果

绑定style属性

1. 将style属性值绑定为对象

Vue中,将style属性值绑定为对象时,该对象中的属性名表示CSS属性名属性值CSS属性值。以对象语法绑定元素的style属性,示例代码如下。

<template><div v-bind:style="{ color: 'red', 'font-size': '30px' }"></div><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>
<script setup>
import { ref } from 'vue'
const activeColor = ref('red')
const fontSize = ref(30)
</script>

除了将对象直接定义在模板中,还可以将对象定义在<script>标签中,示例代码如下。

<template><div v-bind:style="styleObject"></div>
</template>
<script setup>
import { reactive } from 'vue';
const styleObject = reactive({color: 'red',fontSize: '12px'
})
</script>

如何为style属性绑定对象

创建src\components\StyleObject.vue文件

<template><!-- 绑定样式属性值 --><div v-bind:style="{ 'background-color': pink, width: width, height: height + 'px' }"><!-- 三元表达式 --><div v-bind:style="{ backgroundColor: isBlue ? blue : 'black', width: '50px', height: '20px' }"></div><!-- 绑定样式对象 --><div v-bind:style="myDiv"></div></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isBlue = ref(false)
const blue = ref('blue')
const pink = ref('pink')
const width = ref('100%')
const height = ref(40)
const myDiv = reactive({backgroundColor: 'red',  width: '50px',  height: '20px'
})
</script>
运行结果
2. 将style属性绑定为数组

style属性绑定为数组,可以实现将多个样式应用到同一个元素上,每个对象需要在<script>标签定义,示例代码如下。

<div v-bind:style="[classObj1, classObj2]"></div>

class属性绑定数组

创建src\components\StyleArray.vue文件

<template><!-- 使用数组 --><div v-bind:style="[activeClass, borderClass]"></div><!-- 使用三元表达式 --><div v-bind:style="[isActive ? activeClass : '', borderClass]"></div><!-- 数组语法中使用对象语法 --><div v-bind:style="[{ backgroundColor: 'rgb(59, 192, 241)', height: '10px' }, borderClass]"></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const isActive = ref(true)
const activeClass = reactive({height: '10px',backgroundColor: 'rgb(59, 192, 241)'})const borderClass = reactive({border: '2px solid rgb(0, 0, 0)'
})
</script>
运行结果

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

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

相关文章

每日OJ题_字符串②_力扣5. 最长回文子串(中心拓展)

目录 力扣5. 最长回文子串 解析代码&#xff08;中心拓展&#xff09; 力扣5. 最长回文子串 5. 最长回文子串 难度 中等 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#…

latex变量上下加自适应长度箭头

latex变量上下加自适应长度箭头 在变量上加箭头的代码如下 % 在上 \overrightarrow{A B} \overleftarrow{A B} % 在下 \underrightarrow{A B} \underleftarrow{A B}得出的结果依次如下 A B → , A B ← , A B → , A B ← \overrightarrow{A B},\overleftarrow{A B}, \under…

探索并发编程:深入理解线程池

文章目录 前言一、线程池是什么&#xff1f;二、如何创建线程池1.使用Executors类2.使用ThreadPoolExecutor类手动配置线程池 总结 前言 随着计算机系统的不断发展和进步&#xff0c;我们需要处理更多的并发任务和复杂的操作。而线程池作为一种高效的线程管理机制&#xff0c;…

PyTorch 深度学习(GPT 重译)(一)

第一部分&#xff1a;PyTorch 核心 欢迎来到本书的第一部分。在这里&#xff0c;我们将与 PyTorch 迈出第一步&#xff0c;获得理解其结构和解决 PyTorch 项目机制所需的基本技能。 在第一章中&#xff0c;我们将首次接触 PyTorch&#xff0c;了解它是什么&#xff0c;解决了…

爬虫基础:HTTP基本原理

爬虫基础&#xff1a;HTTP基本原理 前言HTTP基本原理URI 和 URLHTTP 和 HTTPSHTTP 请求过程请求与响应HTTP请求HTTP响应请求与响应的交互过程 HTTP 2.0二进制传输多路复用Header压缩服务器端提前响应内容安全 前言 了解 HTTP的基本原理&#xff0c;了解从往测览器中输人 URL到获…

设计模式总结(四)

上一篇总结了设计模式的结构型&#xff0c; 接下来总结一下设计模式的几种行为型模式。 模板方法模式&#xff1a; 模板方法模式定义了一个算法的骨架&#xff0c;将一些步骤延迟到子类中实现。这样做的目的是使得子类可以在不改变算法结构的情况下重新定义算法的某些步骤&…

「连载」边缘计算(三十二)03-14:边缘部分源码(源码分析篇)

&#xff08;接上篇&#xff09; EdgeCore之edgemesh 前面对EdgeCore组件的edged、devicetwin、edgehub、eventbus、metamanager功能模块进行了分析&#xff0c;本节对EdgeCore组件的另一个功能模块edgemesh进行剖析。目前&#xff0c;KubeEdge官网没有edgemesh相关介绍&…

Visio 2021专业版密钥下载安装

Visio 2021 专业版是微软公司开发的一款功能强大的流程图制作软件&#xff0c;适用于创建各种类型的图表和流程图&#xff0c;包括&#xff1a; 流程图&#xff1a;用于可视化业务流程、工作流程和系统流程。组织结构图&#xff1a;用于展示组织结构和人员关系。网络图&#x…

算法沉淀——贪心算法四(leetcode真题剖析)

算法沉淀——贪心算法四 01.最长回文串02.增减字符串匹配03.分发饼干04.最优除法 01.最长回文串 题目链接&#xff1a;https://leetcode.cn/problems/longest-palindrome/ 给定一个包含大写字母和小写字母的字符串 s &#xff0c;返回 通过这些字母构造成的 最长的回文串 。 …

YOLOV5 改进:修改网络结构--C2f 模块

1、前言 YOLOV5 采用C3模块,类似于残差结构的思想 class C3(nn.Module):# CSP Bottleneck with 3 convolutionsdef __init__(self, c1, c2, n=1, shortcut=True, g=1, e=0.5): # ch_in, ch_out, number, shortcut, groups, expansionsuper().__init__()c_ = int(c2 * e) #…

一篇文章搞懂vue基础(上)

01._初识vue 初识vue: 1.想让Vue工作&#xff0c;就必须创建一个vue实例&#xff0c;且要传入一个配置对象&#xff1b; 2.root容器里的代码依然符合html规范&#xff0c;只不过混入了一些特殊的vue语法 3.root容器里的代码被称为【Vue模版】 4.Vue实例和容器是一一对应的 5.真…

《1w实盘and大盘基金预测 day8》

昨日预测还行&#xff0c;大盘最低到3054缺口附近&#xff0c;并没有补缺口 &#xff0c;顶住了&#xff0c;震荡向上&#xff0c;评分B。 今天行情是指数涨却赚不到钱&#xff0c;像极了拉指数掩护蓝筹股出货 公众号&#xff1a;JavaHelmet 昨天预测&#xff1a; 3042-305…

大数据开发(Hadoop面试真题)

大数据开发&#xff08;Hadoop面试真题&#xff09; 一、HDFSⅠ、HDFS基础概念和架构1、HDFS的作用2、介绍下HDFS&#xff0c;说下HDFS优缺点&#xff0c;以及使用场景&#xff1f;3、请解释一下Hadoop中NameNode和DataNode的作用。4、请解释一下HDFS架构中NameNode和DataNode之…

一文带你了解MySQL事务特性以及其底层原理

MySQL的事务支持是通过其存储引擎&#xff0c;特别是InnoDB存储引擎来提供的。事务的四大特性&#xff0c;通常被称为ACID属性&#xff0c;分别是原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff0…

Linux中,运行程序,顺便将打印信息存储在Log文件中查看

前言 如题&#xff0c;原本打算在代码中自己写一个类去管理将打印信息收集到log日志中&#xff0c;忽然想到&#xff0c;其实也可以写sh脚本 简单demo1 #!/bin/bash# 启动应用程序 test&#xff0c;并将标准输出和标准错误输出都追加到 log 文件中 ./test >> output.log…

使用 mypy 做 type check

前言 完残&#xff01;&#x1f602;&#xff0c;最近看之前写的 Python 代码老得琢磨这比变量的类型是啥&#xff08;Python 无类型系统xxx&#xff09;&#xff0c;不愧是我写的&#xff01; 看段之前写的实现迭代器模式的代码&#xff1a; # 抽象迭代器类 class Iterator(…

7-7 12-24小时制

题目链接&#xff1a;7-7 12-24小时制 一. 题目 1. 题目 2. 输入输出格式 3. 输入输出样例 4. 限制 二、代码 1. 代码实现 #include <stdio.h>int main(void) {int hour, minute;char *str;if (scanf("%d:%d", &hour, &minute) ! 2) {return -1;}i…

操作系统系列学习——死锁处理

文章目录 前言死锁处理 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划学习操作系统并完成6.0S81&#xff0c;加油&#xff01; 本文总结自B站【哈工大】操作系统 李治军&#xff08;全32讲&#xff09; 老师课程讲的非常好&#xff0c;感谢 【哈工大】操…

如何优惠申请DigiCert证书

DigiCert作为全球知名的数字证书颁发机构&#xff0c;其SSL证书以高度的安全性和信任度广受认可。而JoySSL作为国内优秀的SSL证书服务平台&#xff0c;提供了便捷、高效的证书申请服务&#xff0c;让您能够轻松获取并安装DigiCert SSL证书。接下来&#xff0c;本文将详细介绍如…

pytest相关面试题

pytest是什么&#xff1f;它有什么优点&#xff1f; pytest是一个非常流行的Python测试框架&#xff0c;它具有简洁、易用、高校等优点。他可以帮助测试人员方便地编写和运行测试用例&#xff0c;并且提供了丰富的插件和扩展&#xff0c;支持各种测试需求介绍下pytest常用的库 …