建站过程,wordpress如何增加产品类目,wordpress做的论坛,做网站 过程目录
绑定对象
绑定数组
用在组件上
组件内只有一个根元素
组件内有多个元素 class与动态class是可以一起使用的
绑定对象 :class { 类名1: 判断条件1, 类名2: 判断条件2, ... } 如果类名后面对应的条件成立#xff0c;则类名就会添加 案例
template { 类名1: 判断条件1, 类名2: 判断条件2, ... } 如果类名后面对应的条件成立则类名就会添加 案例
template!-- 这里flag为true,所以存在 bg 这个类名 加上本来的类名 box, 则现在的div的类名为 box bg --div classbox :class{ bg: flag }/div
/templatescript setup langts
import { ref } from vueconst flag ref(true)
/scriptstyle
.box {width: 500px;height: 300px;margin: 50px auto;
}.bg {background: pink;
}
/style当然我们也可以直接给class绑定一个对象
template!-- 这里flag为true,所以存在 bg 这个类名 加上本来的类名 box, 则现在的div的类名为 box bg --div classbox :classstyleObj/div
/templatescript setup langts
import { ref } from vueconst flag ref(true)const styleObj ref({ bg: flag.value })
/scriptstyle
.box {width: 500px;height: 300px;margin: 50px auto;
}.bg {background: pink;
}
/style也可以绑定一个计算属性
template!-- 这里flag为true,所以存在 bg 这个类名 加上本来的类名 box, 则现在的div的类名为 box bg --div classbox :classstyleObj/div
/templatescript setup langts
import { ref, computed } from vueconst flag ref(true)const styleObj computed(() ({ bg: flag.value }))
/scriptstyle
.box {width: 500px;height: 300px;margin: 50px auto;
}.bg {background: pink;
}
/style绑定数组
也可以使用一个数组来绑定多个 class数组中我们可以写 三元表达式 对象形式 直接写类名 :class[ 直接写类名 , { 类名1: 判断条件1, 类名2: 判断条件2, ... } , 类名 条件1条件2 , ... ] template!-- 数组中多个类名之间用逗号分隔。可以直接写类名也可以写三元还可以写对象形式 --div classbox :class[{ bg: flag }, w500, flag ? h300: ]/div
/templatescript setup langts
import { ref } from vueconst flag ref(true)
/scriptstyle
.box {margin: 50px auto;
}.bg {background: pink;
}.w500 {width: 500px;
}.h300 {height: 300px;
}
/style用在组件上
组件内只有一个根元素
会直接添加到根元素上
父组件
template!-- 因为Son组件内只有一个跟元素所以类名都会添加到Son组件的根元素上 --Son :class[box, { bg: flag }, flag ? w500 : , h300]/Son
/templatescript setup langts
import { ref } from vue
import Son from ./Son.vueconst flag ref(true)
/scriptstyle
.box {margin: 50px auto;
}.bg {background: pink;
}.w500 {width: 500px;
}.h300 {height: 300px;
}
/style子组件
templatediv子组件/div
/template
组件内有多个元素
需要指定哪个根元素来接收这个 class。可以通过组件的 $attrs 属性来实现指定
$attrs会把props没有声明接收的全部接收过来起到了一个兜底的作用
父组件
template!-- Son组件内有多个跟元素则就需要Son组件内某个跟组件借助$attrs进行接收使用 --Son :class[box, { bg: flag }, flag ? w500 : , h300]/Son
/templatescript setup langts
import { ref } from vue
import Son from ./AboutView.vueconst flag ref(true)
/scriptstyle
.box {margin: 50px auto;
}.bg {background: pink;
}.w500 {width: 500px;
}.h300 {height: 300px;
}
/style子组件
templatediv :class$attrs.class子组件/divdiv多个跟标签 -- {{ $attrs }}/div
/templatescript setup langts
import { useAttrs } from vue// 可以使用 useAttrs 这个函数查看没有被 props 接收的数据
const attrs useAttrs()
console.log(attrs)
/script
