vue小试 （案例一）

1、DOM元素标识------$refs

    一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

     但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

    然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了

2、获取input 元素值 　　

  

<input type="text" placeholder="输入编号" ref="input1"/>
<input type="text" placeholder="输入名称" ref="input2"/><br />
<input type="button" value="添加数据" @click="addDate"/>

 //获取input 元素值
   var id = this.$refs.input1.value;
   var name = this.$refs.input2.value;

 //清空页面上的文本框中的数据
　 this.$refs.input1.value = "";
   this.$refs.input2.value = "";

3、完整案例

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7     <style>
  8       .box {
  9         width: 900px;
 10         height: auto;
 11         overflow: hidden;
 12         margin: 30px auto;
 13       }
 14       
 15       .left {
 16         height: 150px;
 17         width: 185px;
 18         padding: 5px;
 19         display: inline-block;
 20         border: 1px solid black;
 21       }
 22       
 23       .left input {
 24         padding: 2px;
 25         margin-top: 10px;
 26       }
 27       
 28       .right {
 29         width: 600px;
 30         height: auto;
 31         display: inline-block;
 32         margin-left: 30px;
 33         vertical-align: top;
 34       }
 35       
 36       .right table {
 37         border-collapse: collapse;
 38         width: 580px;
 39       }
 40       
 41       .right table th {
 42         background-color: green;
 43         padding: 5px;
 44         text-align: center;
 45         border: 1px solid black;
 46         color: #FFFFFF;
 47       }
 48       
 49       .right table tr {
 50         text-align: center;
 51       }
 52       
 53       .right table td {
 54         border: 1px solid black;
 55       }
 56     </style>
 57   </head>
 58   <body>
 59     <div id="app">
 60       <div class="box">
 61         <div class="left">
 62           <input type="text" placeholder="输入编号" ref="input1"/>
 63           <input type="text" placeholder="输入名称" ref="input2"/><br />
 64           <input type="button" value="添加数据" @click="addDate"/>
 65         </div>
 66         <div class="right">
 67           <table>
 68             <tr>
 69               <th>编号</th>
 70               <th>品牌名称</th>
 71               <th>创建时间</th>
 72               <th>操作</th>
 73             </tr>
 74             <tr v-for="item in list">
 75               <td>{{item.id}}</td>
 76               <td>{{item.name}}</td>
 77               <td>{{item.time}}</td>
 78               <td>
 79                 <a href="javascript:void(0)" @click="delte(item.id)">删除</a>
 80               </td>
 81             </tr>
 82           </table>
 83         </div>
 84       </div>
 85     </div>
 86   </body>
 87   <script>
 88         var vm = new Vue({
 89             el:'#app',
 90             data:{
 91                 list:[
 92                     {"id":1,"name":"宝马","time":new Date()},
 93                     {"id":2,"name":"奔驰","time":new Date()}
 94                 ]
 95             },
 96 //           在 methods中定义方法函数 
 97             methods:{
 98                 //删除
 99                 delte:function(id){
100                     if (!confirm("是否删除数据？")) {
101                       return;
102                     }
103                     //调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
104                     var index = this.list.findIndex(function (item) {
105                       return item.id == id;
106                     });
107                     //调用list.splice(删除的索引，删除的元素个数)
108                     this.list.splice(index, 1);
109                 },
110                 //添加
111                 addDate:function(){
112                     //包装成list要求的对象
113                     var id = this.$refs.input1.value;
114                     var name = this.$refs.input2.value;
115                     var tem = {
116 //                      id: this.id,
117 //                      name: this.name,
118                       id: id,
119                       name: name,
120                       time: new Date()
121                     };
122                     console.log(tem);
123                     console.log(id);
124                     console.log(name);
125                     //将tem追加到list数组中
126                     this.list.push(tem);
127                     //清空页面上的文本框中的数据
128 //                    this.id = "";
129 //                    this.name = "";
130                     this.$refs.input1.value = "";
131                     this.$refs.input2.value = "";
132                 }
133             }
134         })
135     </script>
136 </html>
案例

 

posted @ 2018-03-01 19:48  萌萌鱼~  阅读(144)  评论(0)  编辑  收藏  举报