说明

基本和vue2中的没有太大区别

文本插值

说明

通过双大括号{{}}实现

CodeEG

vue
<template>

  <div>{{ props.msg.text }}</div>

</template>

<script setup lang="ts">

interface TitleProps {

  msg: {

    title: string;

    text: string;

  };

  navTitle?: number;

}

// const props = defineProps<TitleProps>();

const props = withDefaults(defineProps<TitleProps>(), {

  msg: () => {

    return {

      title: '12',

      text: '组件啊',

    };

  },

  navTitle: 1,

});

</script>

<style scoped></style>

html字符串

说明

通过指令`v-html`实现

CodeEg

vue
<template>
  <p v-html="testHtml"></p>
</template>

  

<script setup lang="ts">
const testHtml = `<span>123</span>`
</script>

<style scoped></style>

CodeResult

html
...
<p><span>123</span></p>
...

动态绑定多个值

说明

通过v-bind直接绑定一个对象

EG

vue
<script lang='ts'>
const objtest = {
	name: '小名',
	age: 18
}

</script>
...

<template>
  <div v-bind='objtest'></div>
</template>