1.单文件组件
Vue是一个支持组件化开发的框架。
Vue中的单文件组件是Vue组件的文件格式,每个单文件组件由模板、样式和逻辑3个部分构成。
1.模板
模板用于搭建当前组建的DOM结构,其他代码写在<template>标签中。<template>标签是Vue提供的容器标签,只起到包裹作用,他不会被渲染为真正的DOM元素。
2.样式
样式是指通过CSS代码为当前组件设置样式,其代码写在<style>标签中。
3.逻辑
逻辑是指通过Javascript代码处理组件的数据与业务,其代码写在<script>标签中。
演示如何定义一个基本的单文件组件
<template>
<!-- 此处编写组件的结构 -->
</template>
<script>
/* 此处编写组件的逻辑 */
</script>
<style>
/* 此处编写组件的样式 */
</style>
2.数据绑定
1.初识数据绑定
Vue通过数据绑定实现了数据与页面相分离,从而实现了数据驱动视图的效果。即将页面中的数据分离出来,放到组件的<script>标签中,通过程序操作数据,并且当数据改变时,页面会自动发生改变。
1.定义数据
由于数据和页面是分离的,在实现数据显示之前,需要先在<script>标签中定义组件所需的数据。
语法格式如下:
<script>
export default {
setup() {
return {
数据名: 数据值,
……
}
}
}
</script>
为了让代码更简洁,Vue 3提供了setup语法糖(Syntactic Sugar),使用它可以简化上述语法,提高开发效率。 使用setup语法糖来定义数据的语法格式如下。
<script setup>
const 数据名 = 数据值
</script>
2.输出数据
Vue为开发者提供了Mustache语法(又称为双大括号语法),将数据输出到页面中。
语法格式如下:
{{ 数据名 }}
当页面渲染时,模板中的{{ 数据名 }}会被替换为实际的数据
在Mustache语法中还可以将表达式的值作为输出内容。表达式的值可以是字符串、数字等类型,示例代码如下。
{{ 'Hello Vue.js' }}
{{ number + 1 }}
{{ obj.name }}
{{ ok ? 'YES' : 'NO' }}
{{ '<div>HTML标签</div>' }}
演示数据绑定实现:创建src\components\Message.vue文件。
<template>{{ message }}</template>
<script setup>
const message = '不积跬步,无以至千里'
</script>
修改src\main.js文件,切换页面中显示的组件。
import App from './components/Message.vue'
运行结果:
多学一招:
前面学习的方式是通过Vite创建一个新的项目,这个项目中不仅有Vue,而且整合了一系列辅助开发的工具。 其实Vue的使用方式非常灵活,它还提供了另一种使用方式,就是将Vue引入HTML页面中。但这种方式只能使用Vue的核心功能,所以只适合开发一些简单的页面,在实际开发中一般不用这种方式。
2.响应式数据绑定
如果想要实现页面中数据的更新,则需要进行响应式数据绑定,也就是将数据定义成响应式数据。 Vue为开发者提供了如下函数用于定义响应式数据。
1.ref()函数
ref()函数用于将数据转换成响应式数据,其参数为数据,返回值为转换后的响应式数据。使用ref()函数定义响应式数据的语法格式如下。
响应式数据 = ref(数据)
如果需要更改响应式数据的值,可以使用如下语法格式进行修改。
响应式数据.value = 新值
演示方法:1.创建src\components\Ref.vue文件。
2.import App from './components/Ref.vue'
<template>{{ message }}</template>
<script setup>
import { ref } from 'vue'
const message = ref('会当凌绝顶,一览众山小')
setTimeout(() => {
message.value = '锲而不舍,金石可镂'
}, 2000)
</script>
结果:图1: 等待2秒后的页面效果如图2。
图2:
2. reactive()函数
reactive()函数用于创建一个响应式对象或数组,将普通的对象或数组作为参数传给该函数即可。 使用reactive()函数定义响应式数据的语法格式如下。
响应式对象或数组 = reactive(普通的对象或数组)
演示方法:1.创建src\components\Reactive.vue文件。
2.修改import App from './components/Reactive.vue'
<template>{{ obj.message }}</template>
<script setup>
import { reactive } from 'vue'
const obj = reactive({ message: '不畏浮云遮望眼,自缘身在最高层' })
setTimeout(() => {
obj.message = '欲穷千里目,更上一层楼'
}, 2000)
</script>
结果:图1 等待两秒后图2:
3.toRef()函数
toRef()函数用于将响应式对象中的单个属性转换为响应式数据。 使用toRef()函数定义响应式数据的语法格式如下。
演示方法:1.创建src\components\ToRef.vue文件。
2.修改import App from './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>
结果:图1 等待两秒图2所示 图2:
4.toRefs()函数
toRefs()函数用于将响应式对象中的所有属性转换为响应式数据。 使用toRefs()函数定义响应式数据的语法格式如下。
所有属性组成的对象 = toRefs(响应式对象)
演示方法:1.创建src\components\ToRefs.vue文件。
2.修改src\main.js文件,切换页面中显示的组件。import App from './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>
结果: 图1 等待两秒图2所示:
3.指令
1.内容渲染指令
1.v-text
v-text用于渲染DOM元素的文本内容,如果文本内容中包含HTML标签,那么浏览器不会对其进行解析。v-text的语法格式如下。
<标签名 v-text="数据名"></标签名>
演示方法:1.创建src\components\VText.vue文件。
2.修改src\main.js文件,切换页面中显示的组件。import App from'./components/VText.vue'
<template>
<div v-text="message"></div>
</template>
<script setup>
const message = '<span>咬定青山不放松,立根原在破岩中</span>'
</script>
结果:
2.v-html
在使用Vue进行内容渲染时,如果内容中包含HTML标签并且希望这些标签被浏览器解析,则可以使用v-html。v-html用于渲染DOM元素的HTML内容,其用法与v-text相似。v-html的语法格式如下。
<标签名 v-html="数据名"></标签名>
演示代码:
<template>
<div v-html="html"></div>
</template>
<script setup>
const html = '<strong>千磨万击还坚劲,任尔东西南北风</strong>'
</script>
结果:
2.属性绑定指令
· 在Vue开发中,有时需要绑定DOM元素的属性,从而更好地控制属性的值,此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下。
<标签名 v-bind:属性名="数据名"></标签名>
v-bind还支持将属性与字符串拼接表达式绑定,示例代码如下。
<div :id="'list' + index"></div>
演示方法:
<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>
运行结果:
3.事件绑定指令
在Vue开发中,有时需要给DOM元素绑定事件,从而利用事件实现交互效果,这时可以利用事件绑定指令v-on来实现。v-on的语法格式如下。
<标签名 v-on:事件名="事件处理器"></标签名>
在上述语法格式中,事件名即DOM中的事件名,例如click、input、keyup等;事件处理器可以是方法名或内联JavaScript语句。如果逻辑复杂,事件处理器建议使用方法名,方法需要在<script>标签中定义;如果逻辑简单,只有一行代码,则可以使用内联JavaScript语句。另外,v-on还有简写形式,可以将“v-on:事件名”简写为“@事件名”。
示例代码:
<template>
<button @click="showInfo">输出信息</button>
</template>
<script setup>
const showInfo = () => {
console.log('欢迎来到Vue.js的世界!')
}
</script>
结果:
4.双向数据绑定
Vue为开发者提供了v-model指令来实现双向数据绑定,使用它可以在input、textarea和select元素上创建双向数据绑定,它会根据使用的元素自动选取对应的属性和事件组合,负责监听用户的输入事件并更新数据。v-model的语法格式如下。
<标签名 v-model="数据名"></标签名>
v-model内部会为不同的元素绑定不同的属性和事件,具体如下。
- textarea元素和text类型的input元素会绑定value属性和input事件。
- checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。
- select元素会绑定value属性和change事件。
例如,使用v-model实现输入框的值与变量保持同步,示例代码如下。
<input v-model="info">
为了方便对用户输入的内容进行处理,v-model提供了3个修饰符。v-model的修饰符如下表所示。
演示方法:
<template>
请输入姓名:<input type="text" v-model="username">
<div>姓名是:{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>
结果: 在输入框中输入“xiaoming”
演示.number修饰符的使用方法
在src\components\VModel.vue文件的<template>标签中添加代码,通过v-model实现双向数据绑定。
<input type="text" v-model="n1"> + <input type="text" v-model="n2">
= {{ n1 + n2 }}
结果:
改变n1的值为“198”,查看n1 + n2的值。改变n1的值为“198”的页面效果如下图所示。
修改输入框的代码,通过添加.number修饰符实现将用户输入的数字自动转换成数字类型。
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2">
改变n1的值为“198”,查看n1 + n2的值。使用.number修饰符后改变n1的值为“198”的页面效果如下图所示。
5.条件渲染指令
在Vue中,当需要根据不同的判断结果显示不同的DOM元素时,可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。
1. v-if
v-if是根据布尔值切换元素的显示或隐藏状态,本质是通过操作DOM元素来切换显示状态。
- 当给定的值为true时,元素存在于DOM树中;
- 当给定的值为false时,元素从DOM树中移除。
v-if有两种使用方式。
①直接给定一个条件,控制单个元素的显示或隐藏
<标签名 v-if="条件"></标签名>
②通过v-if结合v-else-if、v-else来控制不同元素的显示或隐藏
<标签名 v-if="条件A">展示A</标签名>
<标签名 v-else-if="条件B">展示B</标签名>
<标签名 v-else>展示C</标签名>
演示方法:
<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样式来实现元素的显示或隐藏。
当需要频繁切换某个元素的显示或隐藏时,使用v-show会更节省性能开销;而当只需要切换一次显示或隐藏时,使用v-if更合理。
演示使用方法:
<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>
结果:
单击“显示/隐藏”按钮后的页面效果如下图所示。
6.列表渲染指令
掌握列表渲染指令,能够灵活运用v-for指令将数组、对象等中的数据渲染到页面中
使用v-for(根据list数组中的元素)渲染列表后,当在list数组中删除一个元素后,index会发生变化,v-for会重新渲染列表,导致性能下降。
为了给v-for一个提示,以便它能跟踪每个节点的身份,从而对现有元素进行重用和重新排序,建议通过key属性为列表中的每一项提供具有唯一性的值,示例代码如下。
<div v-for="item in items" :key="item.id"></div>
演示使用v-for根据一维数组渲染列表
<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根据对象数组渲染列表
<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根据对象渲染列表
<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>
结果:
4.事件对象
事件对象是在事件触发时产生的对象,该对象保存了事件触发时的相关信息。
1. 通过事件方法的参数获取事件对象
在v-on绑定的用于处理事件的方法中,可以接收到一个参数,这个参数就是事件对象,示例代码如下。
<template>
<button @click="greet">Greet</button>
</template>
<script setup>
const greet = event => console.log(event)
</script>
2. 通过$event获取事件对象
$event是Vue提供的内置变量,使用它可以获取事件对象,示例代码如下。
<template>
<button @click="change($event)">change</button>
</template>
<script setup>
const change = event => console.log(event)
</script>
演示事件对象的使用方法
<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>
通过事件方法的参数获取事件对象的页面效果如下图所示。
单击“count+1”按钮后的页面效果如下图所示。
再次单击“count+1”按钮后的页面效果如下图所示。
演示通过$event获取事件对象的方式
const addCountN = (n, event) => {
count.value += n
if (count.value % 2 === 0) {
event.target.style.border = '3px dotted'
} else {
event.target.style.border = '3px solid'
}
}
通过$event获取事件对象的页面效果
单击“count+n”按钮后的页面效果如下图所示。
再次单击“count+n”按钮后的页面效果如下图所示。
5.事件修饰符
为了简化开发,Vue为开发者提供了事件修饰符,它可以与v-on配合使用,以便于对事件进行控制,让开发者更专注于逻辑。 事件修饰符用于修饰事件的行为,写在事件名称之后,多个事件修饰符可以串联使用。
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. 捕获特定按键
接下来以捕获Enter键为例,演示.enter事件修饰符的使用,示例代码如下。
<template>
<input type="text" v-on:keyup.enter="submit">
</template>
<script setup>
let submit = () => console.log('捕获到Enter键')
</script>
8. 捕获鼠标按键
接下来以捕获鼠标左键为例,演示鼠标按键修饰符的使用,示例代码如下。
<template>
<button v-on:click.left="show('捕获到鼠标左键')">按钮</button>
</template>
<script setup>
let show = message => console.log(message)
</script>
6.计算机属性
Vue提供了计算属性来描述依赖响应式数据的复杂逻辑。 计算属性可以实时监听数据的变化,返回一个计算后的新值,并将计算结果缓存起来。只有计算属性中依赖的数据源变化了,计算属性才会自动重新求值,并重新加入缓存。
1. 定义计算属性
计算属性通过computed()函数定义,该函数的参数为一个回调函数,开发者需要在回调函数中实现计算功能,并在计算完成后返回计算后的数据,语法格式如下。
<script setup>
import { computed } from 'vue'
const 计算属性名 = computed(() => {
return 计算后的数据
})
</script>
2. 输出计算属性
将计算属性定义好后,可以使用Mustache语法输出计算属性,语法格式如下。
{{ 计算属性名 }}
演示计算属性的使用方法
<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>
结果:
单击“更改”按钮后的页面效果如下图所示。
7.侦听器
在Vue中,开发者可以自定义方法来进行数据的更新操作,但是不能自动监听数据的状态。如果想在数据更新后进行相应的操作,可以通过侦听器来实现。
侦听器通过watch()函数定义,watch()函数的语法格式如下。
watch(侦听器的来源, 回调函数, 可选参数)
演示侦听器的使用方法
<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>
在输入框中输入“beijing123”后的页面效果如下图所示。
8.样式绑定
在Vue中,通过更改元素的class属性可以更改元素的样式,而对class属性的操作可以通过v-bind来实现。 使用v-bind绑定class属性时,可以将class属性值绑定为字符串、对象或数组,下面分别进行讲解。
1. 将class属性值绑定为字符串
在Vue中,可以将class属性值绑定为字符串,示例代码如下。
<template>
<div v-bind:class="className"></div>
</template>
<script setup>
const className = 'box'
</script>
当上述代码运行后,div元素的渲染结果如下。
<div class="box"></div>
演示如何为class属性绑定字符串
<template>
<div v-bind:class="className">梦想</div>
</template>
<script setup>
const className = 'box'
</script>
<style>
.box {
border: 1px solid black;
}
</style>
为class属性绑定字符串的页面效果如下图所示。
2. 将class属性值绑定为对象
<template>
<div v-bind:class="{ className: isActive }"></div>
</template>
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>
运行上述代码后,div元素的渲染结果如下。
使用v-bind绑定的class属性可以与普通的class属性共存,示例代码如下。
<div class="className1" v-bind:class="{ className2: isActive }"></div>
在上述代码中,当isActive为true时,div元素的渲染结果如下。
<div class="className1 className2"></div>
在使用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属性绑定对象
<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属性值绑定为数组
<template>
<div v-bind:class="[className1, className2]"></div>
</template>
<script setup>
import { ref } from 'vue'
const className1 = ref('active')
const className2 = ref('error')
</script>
运行上述代码后,div元素的渲染结果如下。
如果想有条件地切换列表中的class,可以使用三元表达式,示例代码如下。
当class有多个条件时,在数组语法中也可以使用对象语法,示例代码如下。
演示如何为class属性绑定数组
<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>
运行结果:
8.2 绑定style属性
在Vue中,通过更改元素的style属性也可以更改元素的样式,对style属性的操作也可以通过v-bind来实现。使用v-bind绑定style属性时,可以将style属性值绑定为对象或数组,下面分别进行讲解。
1. 将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>
<template>
<div v-bind:style="styleObject"></div>
</template>
<script setup>
import { reactive } from 'vue';
const styleObject = reactive({
color: 'red',
fontSize: '12px'
})
</script>
演示如何为style属性绑定对象
<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属性绑定为数组
演示如何为class属性绑定数组
<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>
结果:
9.阶段案例---学习计划表
代码:
<template>
<div class="card">
<!-- 标题区域 -->
<div class="card-header">学习计划表</div>
<!-- 提交区域 -->
<div class="card-body">
<form @submit.prevent="add">
<div class="row g-4">
<!-- 学习科目 -->
<div class="col-auto">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">学习科目</span>
<input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject" />
</div>
</div>
<!-- 学习任务 -->
<div class="col-auto">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">学习内容</span>
<textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
:style="{ height: '32px' }"></textarea>
</div>
</div>
<!-- 学习地点 -->
<div class="col-auto">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">学习地点</span>
<select class="form-select form-select-sm" v-model="selectedOption">
<option v-for="option in options" :value="option.place" :key="option.placeCode">
{{ option.place }}
</option>
</select>
</div>
</div>
<!-- 添加按钮 -->
<div class="col-auto">
<button type="submit" class="btn btn-primary">添加</button>
</div>
</div>
</form>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th scope="col">序号</th>
<th scope="col">学习科目</th>
<th scope="col">学习内容</th>
<th scope="col">学习地点</th>
<th scope="col">完成状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.subject }}</td>
<td>{{ item.content }}</td>
<td>{{ item.place }}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" :id="'cb' + item.id"
v-model="item.status" />
<label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
<label class="form-check-label" :for="'cb' + item.id" v-else>未完成
</label>
</div>
</td>
<td>
<a href="javascript:;" @click="remove(item.id,item.status)">删除</a>
</td>
</tr>
</tbody>
</table>
</template>
<script setup>
import {
ref
} from 'vue'
const list = ref([{
id: '1',
subject: 'Vue.js 前端实战开发',
content: '学习指令,例如 v-if、v-for、v-model 等',
place: '自习室',
status: false,
}, ])
let remove = (id, status) => {
if (status) {
list.value = list.value.filter(item => item.id !== id)
} else {
alert('请完成该学习计划后再进行删除操作!')
}
}
let subject = ref('')
let content = ref('')
let nextId = ref('')
let selectedOption = ref('自习室')
let options = ref([{
placeCode: 0,
place: '自习室',
},
{
placeCode: 1,
place: '图书馆',
},
{
placeCode: 2,
place: '宿舍',
},
])
let add = () => {
if (subject.value === '') {
alert('学习科目为必填项!')
return
}
nextId.value = Math.max(...list.value.map(item => item.id)) + 1
const obj = {
id: nextId.value,
subject: subject.value,
content: content.value,
place: selectedOption.value,
status: false,
}
list.value.push(obj)
subject.value = ''
content.value = ''
selectedOption.value = '自习室'
}
</script>
结果样式:
自定义添加后的效果: