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>