Vue3 模版常用语法

一、背景

二、实现

仅支持表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
{{ author.books.length > 0 ? 'Yes' : 'No' }}

<div :id="`list-${id}`"></div>

调用函数

<time :title="toTitleDate(date)" :datetime="date">
{{ formatDate(date) }}
</time>

<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'
})
</script>

<template>
 	<p>Has published books:</p>
 	<span>{{ publishedBooksMessage }}</span>
</template>

三、遇到的报错

四、参考博客

https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions