Vue指令之v-model
?<body>??????????<div?id="app">????????????<h4>{{?msg?}}</h4>?????????????????????<!--?v-bind?只能实现数据的单向绑定,从?M?自动绑定到?V,?无法实现数据的双向绑定??-->????????????<!--?<input?type="text"?v-bind:value="msg"?style="width:100%;">?-->?????????????????????<!--?使用??v-model?指令,可以实现?表单元素和?Model?中数据的双向数据绑定?-->????????????<!--?注意:?v-model?只能运用在?表单元素中?-->????????????<!--?input(radio,?text,?address,?email....)???select????checkbox???textarea???-->????????????<input?type="text"?style="width:100%;"?v-model="msg">??????????</div>???????????????????<script>????????????//?创建?Vue?实例,得到?ViewModel????????????var?vm?=?new?Vue({??????????????el:?'#app',??????????????data:?{????????????????msg:?'大家都是好学生,爱敲代码,爱学习,爱思考,简直是完美,没瑕疵!'??????????????},??????????????methods:?{??????????????}????????????});??????????</script>????????</body>
简易计算器实现
<body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { calc() { // 计算器算数的方法 // 逻辑: /* switch (this.opt) { case '+': this.result = parseInt(this.n1) + parseInt(this.n2) break; case '-': this.result = parseInt(this.n1) - parseInt(this.n2) break; case '*': this.result = parseInt(this.n1) * parseInt(this.n2) break; case '/': this.result = parseInt(this.n1) / parseInt(this.n2) break; } */ // 注意:这是投机取巧的方式,正式开发中,尽量少用 var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)' this.result = eval(codeStr) } } }); </script> </body>