Vue 数据渲染
2024年9月18日...小于 1 分钟
v-text
v-text 指令用于将数据渲染到元素的文本内容中，它会覆盖元素原有的文本内容
单文件组件
<template>
<div v-text="text"></div>
</template>
<script setup>
import { ref } from 'vue'
const text = ref('hello world')
</script>HTML
<body>
<div id="app">
<div v-text="text"></div>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const text = ref('hello world')
return {
text
}
}
}).mount('#app')
</script>
</body>v-html
v-html 指令用于将数据渲染到元素的 HTML 内容中，它会解析并渲染 HTML 标签
单文件组件
<template>
<div v-html="html"></div>
</template>
<script setup>
import { ref } from 'vue'
const html = ref('<h1>hello world</h1>')
</script>HTML
<body>
<div id="app">
<div v-html="html"></div>
</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const html = ref('<h1>hello world</h1>')
return {
html
}
}
}).mount('#app')
</script>
</body> Powered by Waline v3.3.2