03文本数据操作

 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 </html>