Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute,应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
v-bind
指令指示 Vue 将元素的 id
attribute 与组件的 dynamicId
属性保持一致。如果绑定的值是 null
或者 undefined
,那么该 attribute 将会从渲染的元素上移除。
简写
因为 v-bind
非常常用,我们提供了特定的简写语法:
<div :id="dynamicId"></div>
案例:v-bind实现图片轮播图
说明:当需要关闭template中的button的loading属性以及disabled属性,直接使用false,则默认读取的字符串依然是ture,需要加入v-bind。
<template>
<view>
<image :src="picur1" mode=""></image>
<button type="primary" :loading="false" :disabled="false">按钮</button>
</view>
</template>
<script setup>
import { ref } from 'vue';
const picur1 = ref("../../static/pic1.jpg");
const arrs = ref([
"../../static/pic1.jpg",
"../../static/pic2.jpg",
"../../static/pic3.jpg",
"../../static/pic4.jpg"
]);
let i = 0;
setInterval(()=>{
i++;
picur1.value = arrs.value[i%4];//如果不取余数,那么arrs【3】以后就显示空白
},1000)
</script>
<style lang="scss">
</style>