vue3 html模版判断与赋值同时进行？

Question

<img v-if="isXxx" :src="getSrc"/>
<xx v-else/>

如上结构，isXxx与getSrc的内容基本相同，而且是个耗时查询，实在没必要执行两遍，src能使用v-if的结果吗？
或者有别的写法？
谢谢

Answer 1

这样写怎么会执行两次呢

const isXxx= ref(false)
const getSrc = ref('')

const loadSrc=async ()=>{
   const result =await 耗时的查询()
   if(reslut){ //假设这里满足你要的条件了
   isXxx.value=true
   getSrc='xxxxx'
  }

}

//在需要的地方调用loadSrc比如在mounted的时候

Answer 2

可以啊，把返回结果赋值给一个变量就行，默认是空字符串。
这样结果返回之前就不会渲染，返回之后如果有返回值就能直接渲染了。

Answer 3

这样写没有毛病一目了然。
非得这样写吗
<img :src="isXxx ? getSrc : xxxx"/>