Vue指令之v-model
?<body>??????????<div?id="app">????????????<h4>{{?msg?}}</h4>?????????????????????<!--?v-bind?只能實(shí)現(xiàn)數(shù)據(jù)的單向綁定吃警，從?M?自動(dòng)綁定到?V糕篇，?無法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定??-->????????????<!--?<input?type="text"?v-bind:value="msg"?style="width:100%;">?-->?????????????????????<!--?使用??v-model?指令，可以實(shí)現(xiàn)?表單元素和?Model?中數(shù)據(jù)的雙向數(shù)據(jù)綁定?-->????????????<!--?注意：?v-model?只能運(yùn)用在?表單元素中?-->????????????<!--?input(radio,?text,?address,?email....)???select????checkbox???textarea???-->????????????<input?type="text"?style="width:100%;"?v-model="msg">??????????</div>???????????????????<script>????????????//?創(chuàng)建?Vue?實(shí)例酌心，得到?ViewModel????????????var?vm?=?new?Vue({??????????????el:?'#app',??????????????data:?{????????????????msg:?'大家都是好學(xué)生拌消，愛敲代碼，愛學(xué)習(xí)安券，愛思考墩崩，簡(jiǎn)直是完美，沒瑕疵侯勉！'??????????????},??????????????methods:?{??????????????}????????????});??????????</script>????????</body>
簡(jiǎn)易計(jì)算器實(shí)現(xiàn)
<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> // 創(chuàng)建 Vue 實(shí)例鹦筹，得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { calc() { // 計(jì)算器算數(shù)的方法 // 邏輯： /* 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; } */ // 注意：這是投機(jī)取巧的方式，正式開發(fā)中址貌，盡量少用 var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)' this.result = eval(codeStr) } } }); </script> </body>
