内容渲染 采用 :进行属性渲染创建 demo3.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"> <a :href="link">必应</a> <br><br> <input type="text" :placeholder="inputValue"> <br><br> <img :src="imgSrc" :style="{width: imgWidth}" alt=""> </div> </body> <script> const vm = { data: function() { return { // 超链接地址 link: "https://cn.bing.com/", // 文本框提示内容 inputValue: '请输入内容...', //图片src link imgSrc: 'https://i2.3conline.com/images/piclib/201108/25/batch/1/107243/13142814749678n41h8hc7p.jpg', //图宽 imgWidth: '200px', } } } const app = Vue.createApp(vm) app.mount('#app') </script> </html> 效果展示