一、背景
二、实现
仅支持表达式
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
{{ author.books.length > 0 ? 'Yes' : 'No' }}
<div :id="`list-${id}`"></div>
**调用函数
<script setup>
通过计算属性
import { reactive, computed } from 'vue'
const author = reactive({
name: 'John Doe',
books: [
'Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery'
]
})
// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
<template>
<p>Has published books:</p>
<span>{{ publishedBooksMessage }}</span>
</template>
三、遇到的报错
四、参考博客
https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions