vue v-model属性

时间:2019-09-16
本文章向大家介绍vue v-model属性,主要包括vue v-model属性使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <input type="text" v-model="n1">
11             <select v-model="opt">
12                 <option value="+">+</option>
13                 <option value="-">-</option>
14                 <option value="*">*</option>
15                 <option value="/">/</option>
16             </select>
17             <input type="text" v-model="n2">
18             <input type="button" value="=" v-on:click="calca">
19             <input type="text" v-model="result">
20         </div>
21     </body>
22     <script type="text/javascript">
23         var vm = new Vue({
24             el: "#app",
25             data: {
26                 n1: 0,
27                 n2: 0,
28                 result: 0,
29                 opt: "+",
30             },
31             methods: {
32                 calca: function() {
33                     // switch (this.opt) {
34                     //     case "+":
35                     //         this.result = parseInt(this.n1) + parseInt(this.n2);
36                     //         break;
37                     //     case "-":
38                     //         this.result = parseInt(this.n1) - parseInt(this.n2);
39                     //         break;
40                     //     case "*":
41                     //         this.result = parseInt(this.n1) * parseInt(this.n2);
42                     //         break;
43                     //     case "/":
44                     //         this.result = parseInt(this.n1) / parseInt(this.n2);
45                     //         break;
46                     // }
47                     this.result = eval("parseInt(this.n1) " + this.opt + " parseInt(this.n2)");
48                 }
49             }
50         });
51     </script>
52 </html>

注意:v-model只能用于表单元素

原文地址:https://www.cnblogs.com/yanghaoyu0624/p/11490402.html