vue3 refs的三元表达式

在Vue 3中，我们可以使用`ref`来创建一个响应式的对象或值。当我们需要在三元表达式中使用`ref`时，可以这样操作：

<template>
  <div>
    <p>{{ showText }}</p>
    <button @click="toggleText">Toggle</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isShown = ref(true);
    const showText = ref('');

    const toggleText = () => {
      isShown.value = !isShown.value;
      showText.value = isShown.value ? 'Text shown' : 'Text hidden';
    };

    return {
      showText,
      toggleText
    };
  }
};
</script>

在上面的示例中，我们定义了两个`ref`变量：`isShown`和`showText`。`isShown`用于表示是否显示文本，而`showText`用于存储要显示的文本内容。

在`toggleText`函数中，我们使用三元表达式来根据`isShown.value`的值来更新`showText.value`的值。如果`isShown.value`为`true`，则将文本设置为"Text shown"，否则设置为"Text hidden"。

在模板中，我们通过插值表达式`{{ showText }}`来显示文本内容，并且通过点击按钮来切换文本的显示与隐藏。

这样，我们就可以在Vue 3中使用三元表达式与`ref`变量来实现条件渲染。