1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>03文本数据操作</title>
9 <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.prod.js"></script>
10 </head>
11 <body>
12 <div id="app">
13 <!--vue文本数据-->
14 <div v-text="name"></div>
15 <div>{{name}}</div>
16 <!--vue html数据-->
17 <div v-html="html"></div>
18 </div>
19
20 <script>
21 let app = Vue.createApp({
22 data() {
23 return {
24 name: 'vue开发',
25 html: `<div style="color: red">VueTtml</div>`,
26 };
27 },
28 });
29 let vm = app.mount('#app');
30
31 // vue数据是双向绑定的
32 setTimeout(() => {
33 vm.name = 'vue前端开发';
34 },3000);
35
36 </script>
37 </body>
38