vue渲染文本和html:v-text,v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text</title>
</head>
<body>

<div id="app">
    
    <h4>1.v-text 渲染数据</h4>
    <p v-text="web.title"></p>
    <h4>2.插值表达式</h4>
    <p>{{web.title}}</p>
    <h4>3.v-html 渲染html</h4>
    <p v-html="web.body"></p>
</div>

    <script type="module">

        import {reactive,createApp} from './vue.esm-browser.js'

        createApp({

            setup(){

                let web = reactive({
                    title:'v-text and v-html usage',
                    body:"<span style='color:red;font-size:18px;font-weight:bold'>this is a test</span>"
                })

                return {
                    web
                }
            }

        }).mount('#app')


    </script>
    
</body>
</html>
vue渲染文本和html:v-text,v-html

评论已关闭
