案例一todolist：
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>todolist</title> 6 <style type="text/css"> 7 .list_con{ 8 width:600px; 9 margin:50px auto 0; 10 } 11 .inputtxt{ 12 width:550px; 13 height:30px; 14 border:1px solid #ccc; 15 padding:0px; 16 text-indent:10px; 17 } 18 .inputbtn{ 19 width:40px; 20 height:32px; 21 padding:0px; 22 border:1px solid #ccc; 23 } 24 .list{ 25 margin:0; 26 padding:0; 27 list-style:none; 28 margin-top:20px; 29 } 30 .list li{ 31 height:40px; 32 line-height:40px; 33 border-bottom:1px solid #ccc; 34 } 35 36 .list li span{ 37 float:left; 38 } 39 40 .list li a{ 41 float:right; 42 text-decoration:none; 43 margin:0 10px; 44 } 45 </style> 46 <script src="js/vue.min.js"></script> 47</head> 48<body> 49 50 <div class="list_con"> 51 <h2>To do list</h2> 52 <input type="text" name="" id="txt1" class="inputtxt" v-model="txt"> 53 <input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="fnAdd"> 54 55 <ul id="list" class="list"> 56 57 <li v-for="(i, j) in mylist"><span>{{ i }}</span><a href="javascript:;" class="up" @click="fnUp(j)"> ↑ </a><a href="javascript:;" class="down" @click="fnDown(j)"> ↓ </a><a href="javascript:;" class="del" @click="fnDel(j)">删除</a></li> 58 <!-- <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> 59 <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li> --> 60 61 </ul> 62 63 </div> 64 <script> 65 var list_con = new Vue({ 66 el:'.list_con', 67 data:{ 68 mylist:['学习html', '学习css', '学习javascript'], 69 txt:'' 70 }, 71 methods:{ 72 fnAdd: function(){ 73 if(this.txt == '') 74 { 75 alert('请输入内容'); 76 return 77 } 78 // mylist结尾追加数据 -- 用户输入的数据 79 this.mylist.push( this.txt ); 80 this.txt = '' 81 }, 82 fnDel: function(index){ 83 // 在mylist删除指定的下标的数据 splice(位置下标, 删除个数, 添加的数据) 84 this.mylist.splice(index, 1) 85 }, 86 fnUp: function(index){ 87 // 第一个报错 88 if(index == 0) 89 { 90 alert('已经是第一个了'); 91 return 92 } 93 // 选中数据 原位置删除 新位置粘贴 94 var myData = this.mylist[index]; 95 this.mylist.splice(index, 1); 96 this.mylist.splice(index-1, 0, myData) 97 }, 98 fnDown: function(index){ 99 if(index == this.mylist.length-1) 100 { 101 alert('已经是最后一个了'); 102 return 103 } 104 var myData = this.mylist[index]; 105 this.mylist.splice(index, 1); 106 this.mylist.splice(index+1, 0, myData) 107 } 108 } 109 }) 110 </script> 111</body> 112</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 type="text/css"> 9 .talk_con{ 10 width:600px; 11 height:500px; 12 border:1px solid #666; 13 margin:50px auto 0; 14 background:#f9f9f9; 15 } 16 .talk_show{ 17 width:580px; 18 height:420px; 19 border:1px solid #666; 20 background:#fff; 21 margin:10px auto 0; 22 overflow:auto; 23 } 24 .talk_input{ 25 width:580px; 26 margin:10px auto 0; 27 } 28 .whotalk{ 29 width:80px; 30 height:30px; 31 float:left; 32 outline:none; 33 } 34 .talk_word{ 35 width:420px; 36 height:26px; 37 padding:0px; 38 float:left; 39 margin-left:10px; 40 outline:none; 41 text-indent:10px; 42 } 43 .talk_sub{ 44 width:56px; 45 height:30px; 46 float:left; 47 margin-left:10px; 48 } 49 .atalk{ 50 margin:10px; 51 } 52 .atalk span{ 53 display:inline-block; 54 background:#0181cc; 55 border-radius:10px; 56 color:#fff; 57 padding:5px 10px; 58 } 59 .btalk{ 60 margin:10px; 61 text-align:right; 62 } 63 .btalk span{ 64 display:inline-block; 65 background:#ef8201; 66 border-radius:10px; 67 color:#fff; 68 padding:5px 10px; 69 } 70 </style> 71 <script src="js/vue.min.js"></script> 72</head> 73<body> 74 <div class="talk_con"> 75 <div class="talk_show" id="words"> 76 <!-- A 字典的person值 --> 77 <!-- 如果说话的人是a，加atalk 否则btalk --> 78 <div v-for="i in mylist" :class="[i.person == 'A'?'atalk':'btalk']"><span>{{ i.person }}说：{{ i.content}}</span></div> 79 <!-- <div class="btalk"><span>B说：还没呢，你呢？</span></div> --> 80 </div> 81 <div class="talk_input"> 82 <select class="whotalk" id="who" v-model="who"> 83 <option value="0">A说：</option> 84 <option value="1">B说：</option> 85 </select> 86 <input type="text" class="talk_word" id="talkwords" v-model="txt"> 87 <input type="button" value="发送" class="talk_sub" id="talksub" @click="fnSend"> 88 </div> 89 </div> 90 <script> 91 var vm = new Vue({ 92 el:'.talk_con', 93 data:{ 94 // 1,2， 3 1 == 说话的人是谁？说话的内容是什么 95 mylist:[ 96 {person:'A', content:'吃饭了吗？'}, 97 {person:'B', content:'还没呢，你呢？'} 98 ], 99 txt:'', 100 who:'0' 101 }, 102 methods:{ 103 fnSend: function(){ 104 if(this.txt == '') 105 { 106 alert('请输入内容'); 107 return 108 } 109 // mylist追加结尾数据 -- {} 110 this.mylist.push({person:this.who==0?'A':'B', content:this.txt}); 111 this.txt = '' 112 } 113 } 114 }) 115 </script> 116</body> 117</html>
