<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edfe"> <script src="https://unpkg.com/vue@3.3.4/dist/vue.global.js"></script> <!-- <script src="https://unpkg.com/vue@2.7.14/dist/vue.js"></script>--> <title>v-text和插值语法</title> </head> <body> <div id="app"> <!-- v-text --> <h2 v-text="message+'!'">测试</h2> <h2 v-text="message+info">测试</h2> <!-- 插值语法--> <h2>{{ message }}!!{{ info }}</h2> </div> <script> // // 此处是Vue2的写法,所以上面引用需要引用Vue2 // const App = new Vue({ // el: '#app', // data: { // message: '您好', // } // }) // 此处是Vue3的写法, 引用时需要引用Vue3 const App = { data() { return { message: '您好', info: '信息', } } } Vue.createApp(App).mount('#app') </script> </body> </html>