vue3.0 模版语法v-bind学习

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>