一：vue实例
1.实例
新建项目：
2.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <!-- 第一个vue示例 --> 12 <div id="app"> 13 <p>{{msg}}</p> 14 </div> 15 <script> 16 // 创建vue实例 17 var vm = new Vue({ 18 el: '#app', 19 data: { 20 msg: 'hello vue!' 21 } 22 }); 23 </script> 24 </body> 25 </html>
效果：
二：知识点
1.v-cloak解决插值闪烁问题
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 [v-cloak] { 10 display: none; 11 } 12 </style> 13 14 </head> 15 <body> 16 <!-- 解决插值表达式闪烁问题 --> 17 <div id="app"> 18 <p v-cloak>{{msg}}</p> 19 </div> 20 21 <script src="./lib/vue-2.4.0.js"></script> 22 <script> 23 var vm = new Vue({ 24 el: '#app', 25 data: { 26 msg: 'hello vue!' 27 } 28 }); 29 </script> 30 </body> 31 </html>
2.v-text与插值表达式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-text="msg"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!' 25 } 26 }); 27 </script> 28 </body> 29 </html>
效果：
区别：
v-text默认没有闪烁问题的
插值表达式可以在前后放其他的内容
v-text会覆盖元素中原本的内容，插值表达式只会替换自己的占位符，不会把整个元素的内容进行清空
3.v-html渲染html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <p v-html="msg2"></p> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!', 25 msg2:'<h1>这是一个H标签</h1>' 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果：
4.v-bind：绑定属性指令
其中，在v-bind后的mytitle被认为是一个变量，然后可以进行表达式运算
可以被简写为:title="mytitle"。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-bind:title="mytitle"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!', 25 mytitle:'自定义属性' 26 } 27 }); 28 </script> 29 </body> 30 </html>
效果：
5.v-on：事件机制
可以简写@click="show”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <!-- 解决插值表达式闪烁问题 --> 15 <div id="app"> 16 <input type="button" value="按钮" v-on:click="show"> 17 </div> 18 19 <script src="./lib/vue-2.4.0.js"></script> 20 <script> 21 var vm = new Vue({ 22 el: '#app', 23 data: { 24 msg: 'hello vue!' 25 }, 26 methods:{ 27 show:function(){ 28 alert("hello on"); 29 } 30 } 31 }); 32 </script> 33 </body> 34 </html>
三：案例
1.跑马灯
method中的方法调用data中的数据需要使用this
使用=>，使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="button" value="浪起来" @click="lang"> 13 <input type="button" value="低调" @click="stop"> 14 <h4>{{msg}}</h4> 15 </div> 16 <script> 17 var vm=new Vue({ 18 el:'#app', 19 data:{ 20 msg:'继续方玉，不要浪 ', 21 timeId:null 22 }, 23 methods:{ 24 lang(){ 25 if(this.timeId!=null) return; 26 this.timeId=setInterval(() => { 27 var start=this.msg.substring(0,1); 28 var end=this.msg.substring(1); 29 this.msg=end+start 30 },1000) 31 }, 32 stop(){ 33 clearInterval(this.timeId); 34 this.timeId=null; //需要重新置为null 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
效果：
四：事件修饰符
1.事件修饰符的介绍
stop：阻止冒泡
prevent：阻止默认事件
capture：添加事件监听器时使用事件捕获模式
self：只当事件在该元素本身触发时触发回调
once：事件只触发一次
2.stop
基础程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <div class="inner" @click="divhandle"> 19 <input type="button" value="浪起来" @click="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:'#app', 26 data:{ 27 msg:'继续方玉，不要浪 ' 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
效果：
· 阻止冒泡程序：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <div class="inner" @click="divhandle"> 19 <input type="button" value="浪起来" @click.stop="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:'#app', 26 data:{ 27 msg:'继续方玉，不要浪 ' 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
3.prevent
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <a href="http://www.baidu.com" @click.prevent="linkclick">百度</a> 19 </div> 20 <script> 21 var vm=new Vue({ 22 el:'#app', 23 data:{ 24 msg:'继续方玉，不要浪 ' 25 }, 26 methods:{ 27 linkclick(){ 28 console.log("百度"); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
4.capture
从外到里进行捕获
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <div class="inner" @click.capture="divhandle"> 19 <input type="button" value="浪起来" @click.stop="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:'#app', 26 data:{ 27 msg:'继续方玉，不要浪 ' 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
5.self
只有自己触发才会触发，类似于冒泡或者捕获这种被动的触发就不会被触发
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <div class="inner" @click.self="divhandle"> 19 <input type="button" value="浪起来" @click="btnhandle"> 20 </div> 21 22 </div> 23 <script> 24 var vm=new Vue({ 25 el:'#app', 26 data:{ 27 msg:'继续方玉，不要浪 ' 28 }, 29 methods:{ 30 divhandle(){ 31 console.log("div 触发"); 32 }, 33 btnhandle(){ 34 console.log("input 触发"); 35 } 36 } 37 }) 38 </script> 39 </body> 40 </html>
6.once
只触发一次，以后不再起作用，而且可以串联
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .inner { 11 height: 150px; 12 background-color: darkcyan; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="app" > 18 <a href="http://www.baidu.com" @click.prevent.once="linkclick">百度</a> 19 </div> 20 <script> 21 var vm=new Vue({ 22 el:'#app', 23 data:{ 24 msg:'继续方玉，不要浪 ' 25 }, 26 methods:{ 27 linkclick(){ 28 console.log("百度"); 29 } 30 } 31 }) 32 </script> 33 </body> 34 </html>
五：v-model
1.v-model数据双向绑定
如果在input中输入文本，则vm.msg可以查看新输入的文本；同样，在控制台上vm.msg='6667777'进行赋值，则input框中的数据也会进行改变
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="msg"> 13 </div> 14 15 <script> 16 var vm=new Vue({ 17 el:'#app', 18 data:{ 19 msg:'学习代码' 20 }, 21 methods:{ 22 23 } 24 }) 25 </script> 26 </body> 27 </html>
2.简易计算器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <input type="text" v-model="n1"> 13 <select name="" id="" v-model="opt"> 14 <option value="+">+</option> 15 <option value="-">-</option> 16 <option value="*">*</option> 17 <option value="/">/</option> 18 </select> 19 <input type="text" v-model="n2"> 20 <input type="button" value="=" @click="calc"> 21 <input type="text" v-model="result"> 22 </div> 23 <script> 24 var vm=new Vue({ 25 el: '#app', 26 data: { 27 n1: 0, 28 n2: 0, 29 result: 0, 30 opt: '+' 31 }, 32 methods:{ 33 calc(){ 34 switch(this.opt){ 35 case '+': 36 this.result=parseInt(this.n1)+parseInt(this.n2); 37 break; 38 case '-': 39 this.result=parseInt(this.n1)-parseInt(this.n2); 40 break; 41 case '*': 42 this.result=parseInt(this.n1)*parseInt(this.n2); 43 break; 44 case '/': 45 this.result=parseInt(this.n1)/parseInt(this.n2); 46 break; 47 } 48 } 49 } 50 }); 51 </script> 52 </body> 53 </html>
六：在vue中使用样式
1.第一种方式，使用数组
里面需要使用引号
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :class="['red','italic']">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 33 } 34 }) 35 </script> 36 </body> 37 </html>
效果：
2.第二种方式，数组中使用三元表达式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :class="['red','italic',flag?'active':'']">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true 33 } 34 }) 35 </script> 36 </body> 37 </html>
3.第三种，对象的方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :class="['red','italic',{'active':flag}]">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true 33 } 34 }) 35 </script> 36 </body> 37 </html>
4.第四种，直接使用对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :class="{red:flag,italic:flag,active:flag}">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true 33 } 34 }) 35 </script> 36 </body> 37 </html>
5.v-bind绑定
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :class="classobj">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true, 33 classobj: {'red':true,'italic':true,'active':true} 34 } 35 }) 36 </script> 37 </body> 38 </html>
6.内联样式，：style方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true, 33 classobj: {'red':true,'italic':true,'active':true} 34 } 35 }) 36 </script> 37 </body> 38 </html>
可以将程序放到vue中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :style="classobj">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true, 33 classobj: {color:'red','font-weight':200} 34 } 35 }) 36 </script> 37 </body> 38 </html>
7.使用数组的方式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <h1 :style="[classobj,classobj2]">这是一个H1</h1> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 flag: true, 33 classobj: {color:'red','font-weight':200}, 34 classobj2: {'font-style':'italic'} 35 } 36 }) 37 </script> 38 </body> 39 </html>
七：v-for
1.v-for迭代普通数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <p v-for="(item,i) in list">{{item}}---{{i}}</p> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 list:[2,5,3,9,6] 33 } 34 }) 35 </script> 36 </body> 37 </html>
效果：
2.v-for迭代对象数组
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <p v-for="item in list">{{item.id}}---{{item.name}}</p> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 list:[ 33 {id:1,name:'a'}, 34 {id:2,name:'b'}, 35 {id:3,name:'c'} 36 ] 37 } 38 }) 39 </script> 40 </body> 41 </html>
3.v-for迭代数字
4.v-for迭代对象
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 .red { 11 color: red; 12 } 13 .thin { 14 font-weight: 200; 15 } 16 .italic { 17 font-style: italic; 18 } 19 .active { 20 letter-spacing: 0.5em; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="app"> 26 <p v-for="(val,key,i) in list">{{val}}---{{key}}-----{{i}}</p> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 list:{ 33 id:1, 34 name:'tom', 35 address:'BJ' 36 } 37 } 38 }) 39 </script> 40 </body> 41 </html>
效果：
5.添加
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 <style> 10 11 </style> 12 </head> 13 <body> 14 <div id="app"> 15 <div> 16 <label>id 17 <input type="text" v-model="id"> 18 </label> 19 <label>name 20 <input type="text" v-model="name"> 21 </label> 22 <input type="button" value="添加" @click="add"> 23 </div> 24 <p v-for="item in list"> 25 <input type="checkbox">{{item.id}}---{{item.name}} 26 </p> 27 </div> 28 <script> 29 var vm = new Vue({ 30 el:'#app', 31 data:{ 32 id:'', 33 name:'', 34 list:[ 35 {id:1,name:'tom'}, 36 {id:2,name:'bob'}, 37 {id:3,name:'tiny'}, 38 {id:4,name:'bean'} 39 ] 40 }, 41 methods:{ 42 add(){ 43 // this.list.push({id:this.id,name:this.name}) 44 this.list.unshift({id:this.id,name:this.name}) 45 } 46 } 47 }) 48 </script> 49 </body> 50 </html>
效果：
八：v-if与v-show
1.说明
v-if：每次都会重新删除或者创建元素
v-show：每次都不会进行dom的删除和创建操作，只是切换了dispaly:none模式
2.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="./lib/vue-2.4.0.js"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <p v-if="flag">这是一个P</p> 13 <p v-show="flag">这是一个P</p> 14 </div> 15 16 <script> 17 var vm=new Vue({ 18 el:'#app', 19 data:{ 20 flag:true 21 } 22 23 }) 24 </script> 25 </body> 26 </html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
