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>
案例
以上是 vue小试 （案例一） 的全部内容， 来源链接： utcz.com/z/378012.html
