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>04动态属性与指令基础</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 <!--v-bind 动态属性指令-->
14 <div v-bind:id="id"></div>
15 <!--v-show 指令控制是否显示内容-->
16 <div v-text="name" v-show="false"></div>
17 <!--使用表达式-->
18 {{n===1?"vue":"VUE"}}
19 <!--v-once 只渲染一次指令，数据发生变化不更新-->
20 <div v-text="name" v-once></div>
21 <div v-text="name"></div>
22 </div>
23
24 <script>
25 let app = Vue.createApp({
26 data(){
27 return {
28 // 设置为 null 或 undefined 时 id 会失效
29 id: "001",
30 name: "vue开发",
31 n: 2,
32 };
33 },
34 });
35
36 let vm = app.mount('#app');
37
38 // v-bind 动态属性指令
39 setTimeout(()=>{
40 vm.id = '002';
41 },3000);
42
43 // v-once 只渲染一次指令，数据发生变化不更新
44 setTimeout(()=>{
45 vm.name="百度";
46 },3000);
47
48 </script>
49 </body>
50
