Vue基本语法

Vue基本语法

1. v-bind

​ 现在数据和DOM已经被建立了关联，所有的东西都是响应式的。我们在控制台操作对象的属性，界面可以实时更新。

​ 我们可以使用v-bind来绑定元素属性！

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div id="app">
10     <span v-bind:title="message">鼠标悬停几秒钟查看</span>
11     <h1 v-if="ok">Yes</h1>
12     <h1 v-else>No</h1>
13 </div>
14 <!--1.导入Vue.js-->
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16 <script>
17     var vm = new Vue({
18         el:"#app",
19         data:{
20             message: "你好",
21             ok: true
22         }
23     })
24 </script>
25 </body>
26 </html>

2. v-if v-else

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div id="app">
10     <span v-bind:title="message">鼠标悬停几秒钟查看</span>
11     <h1 v-if="ok">Yes</h1>
12     <h1 v-else>No</h1>
13     <h2 v-if="type==='A'">A</h2>
14     <h2 v-else-if="type==='B'">B</h2>
15     <h2 v-else>C</h2>
16 </div>
17 <!--1.导入Vue.js-->
18 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
19 <script>
20     var vm = new Vue({
21         el:"#app",
22         data:{
23             message: "你好",
24             ok: true,
25             type: "A"
26         }
27     })
28 </script>
29 </body>
30 </html>

3. v-for

 1 <!DOCTYPE html>
 2 <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <div id="app">
10     <li v-for="(item,index) in items">
11         {{item.message}}--{{index}}
12     </li>
13 </div>
14 <!--1.导入Vue.js-->
15 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16 <script>
17     var vm = new Vue({
18         el:"#app",
19         data:{
20             items: [
21                 {message: '年后'},
22                 {message: '年前'}
23             ]
24         }
25     })
26 </script>
27 </body>
28 </html>

 

posted @ 2022-08-04 16:44  doremi429  阅读(22)  评论(0)  编辑  收藏  举报