vue类与样式的绑定列表渲染

目录

1.类与样式的绑定

1.1绑定 HTML class

1.2绑定数组

1.3绑定内联样式

绑定数组

2.列表渲染

2.1v-for​

2.2v-for 与对象

2.3在 v-for 里使用范围值​

1.类与样式的绑定

1.1绑定 HTML class

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

class可以赋不同名字

第一种方式内敛的方式

const isActive = ref(true) const hasError = ref(false)<divclass="static":class="{ active: isActive, 'text-danger': hasError }" ></div> 渲染的结果 也就是html显示的 <div class="static active"></div>

当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。

第二种方式绑定的方式

const classObject = reactive({active: true,'text-danger': false })<div :class="classObject"></div>这也会渲染出相同的结果。我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：const isActive = ref(true) const error = ref(null)const classObject = computed(() => ({active: isActive.value && !error.value,'text-danger': error.value && error.value.type === 'fatal' }))<div :class="classObject"></div>

1.2绑定数组

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

const activeClass = ref('active') const errorClass = ref('text-danger') <div :class="[activeClass, errorClass]"></div>渲染的结果是： <div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

1.3绑定内联样式

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：

const activeColor = ref('red') const fontSize = ref(30)<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接绑定

const styleObject = reactive({color: 'red',fontSize: '13px' })<div :style="styleObject"></div>

绑定数组

<div :style="[baseStyles, overridingStyles]"></div>

2.列表渲染

2.1v-for​

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])<li v-for="item in items">{{ item.message }} </li>在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。 const parentMessage = ref('Parent') const items = ref([{ message: 'Foo' }, { message: 'Bar' }])<li v-for="(item, index) in items">{{ parentMessage }} - {{ index }} - {{ item.message }} </li>

2.2v-for 与对象

可以通过提供第二个参数表示属性名 (例如 key)：

index第三个参数表示位置索引：

<script setup> import { reactive } from 'vue'const myObject = reactive({title: 'How to do lists in Vue',author: 'Jane Doe',publishedAt: '2016-04-10' }) </script><template><ul><li v-for="(value, key, index) in myObject">{{ index }}. {{ key }}: {{ value }}</li></ul> </template>0. title: How to do lists in Vue 1. author: Jane Doe 2. publishedAt: 2016-04-10

2.3在 v-for 里使用范围值​

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

template

<span v-for="n in 10">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。