vue学习之内容渲染

内容渲染

  • 创建 demo2.html,内容如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>name: {{username}}</p>
        <p>age: {{age}}</p>
        <!-- v-html 命令: html 渲染 -->
        <p v-html="desc"></p>
    </div>

</body>
<script>
    const vm = {
        data: function() {
            return {
                username: 'zs',
                age: 18,
                desc: '必应'
            }

        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>

</html>

效果展示

  • 右键,在默认浏览器打开,效果如下
    vue学习之内容渲染_第1张图片

你可能感兴趣的:(vue,vue.js,学习,javascript)