vue3模版语法-CSDN博客

本文链接：https://blog.csdn.net/2403_86835544/article/details/141613039

1.插值表达式

1.1 原本<view>是不可以进行运算的。使用{{}}可以做一下简单的运算。

<view>{{2+3}}</view>

1.2 还可以在script中进行变量传输。在script中定义一个const变量为a=6，使用view盒子用两个花括号包裹a实现，当然也可以在{{a+5}}，这样a就等于11。

<template>
	<view>
		{{a}}
	</view>
</template>

<script setup>
	const a=6;
</script>

1.3 也可以在插值表达式里面加一些当前时间，随机数，三元表达式，函数方法，都是可以的。

注意的是函数的调用要加（），否则它会将你函数体一起返回。

如"function fn(){return "vue学习" }"

<template>
	<view>{{ Date.now()}}</view>
	<view>{{ Math.random()}}</view>
    <view>{{ 1>2?"张三":"李四"}}</view>
	<view>{{ fn() }}</view>
</template>

<script setup>
	function fn(){
		return "vue学习"
	}
</script>

1.4 效果如图。

2.Attribute 绑定

当无法使用双大括号在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind：（可以简写成 " : "）

列如我们让图片动态式改变，可以在定义变量将图片地址存进来用 v-bind:。

<template>
	<view>
		<image v-bind:src="picurl" mode=""></image>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	const picurl=ref("../../static/pic1.png")
</script>

<style lang="scss">

</style>

注意：如果不设置 src就会发生找不到地址错误。

2.1如何实际v-bind图片轮播

<template>
	<view>
		<image :src="picurl" mode=""></image>
	</view>
</template>

<script setup>
	import {ref} from "vue";//通过它把“ref”取过来
	const array=ref([
		"../../static/pic1.png",
	"../../static/pic2.jpg",
	"../../static/pic3.jpg",
	"../../static/pic4.jpg"
	])//数组
	const picurl=ref("../../static/pic1.png")//第一张图片
	
	let a=0;//设置一个用来查看数字下标
	setInterval(()=>{//定时器
		a++;//每次加1
		picurl.value=array.value[a%4]//对a值的长度取余，假设你要设置3张图片轮播就a%3
	},1000)//每1秒
</script>

<style lang="scss">

</style>