當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定

發布時間：2025/4/16 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

需求：實現簡單的加法計算，分別輸入數值a和數值b ，點擊計算按鈕，結果顯示在下面。 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><h1>簡單計算器</h1><div><span>數值A:</span><span><input type="text" v-model='a'></span></div><div><span>數值B:</span><span><input type="text" v-model='b'></span></div><div><button v-on:click='handle'>計算</button></div><div><span>計算結果:</span><span v-text='result'></span></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*簡單計算器案例 */var vm = new Vue({el: '#app',data: {a: '',b: '',result: ''},methods: {handle: function(){// 實現計算邏輯this.result = parseInt(this.a) + parseInt(this.b);}}});</script> </body> </html>

屬性綁定

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><a v-bind:href="url">百度</a><a :href="url">百度1</a><button v-on:click='handle'>切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*屬性綁定*/var vm = new Vue({el: '#app',data: {url: 'http://www.baidu.com'},methods: {handle: function(){// 修改URL地址this.url = 'http://itcast.cn';}}});</script> </body> </html>

v-model指令的本質

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><div>{{msg}}</div><input type="text" v-bind:value="msg" v-on:input='handle'><input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'><input type="text" v-model='msg'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {msg: 'hello'},methods: {handle: function(event){// 使用輸入域中的最新的數據覆蓋原來的數據this.msg = event.target.value;}}});</script> </body> </html>

樣式綁定

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}</style> </head> <body><div id="app"><div v-bind:class="{active: isActive,error: isError}">測試樣式</div><button v-on:click='handle'>切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*樣式綁定*/var vm = new Vue({el: '#app',data: {isActive: true,isError: true},methods: {handle: function(){// 控制isActive的值在true和false之間進行切換this.isActive = !this.isActive;this.isError = !this.isError;}}});</script> </body> </html>

? ??

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}</style> </head> <body><div id="app"><div v-bind:class='[activeClass, errorClass]'>測試樣式</div><button v-on:click='handle'>切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'error'},methods: {handle: function(){this.activeClass = '';this.errorClass = '';}}});</script> </body> </html>

樣式綁定相關語法細節：
? ? ? ? ? ? 1、對象綁定和數組綁定可以結合使用
? ? ? ? ? ? 2、class綁定的值可以簡化操作
? ? ? ? ? ? 3、默認的class如何處理？默認的class會保留

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}.test {color: blue;}.base {font-size: 28px;}</style> </head> <body><div id="app"><div v-bind:class='[activeClass, errorClass, {test: isTest}]'>測試樣式</div><div v-bind:class='arrClasses'></div><div v-bind:class='objClasses'></div><div class="base" v-bind:class='objClasses'></div><button v-on:click='handle'>切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'error',isTest: true,arrClasses: ['active','error'],objClasses: {active: true,error: true}},methods: {handle: function(){// this.isTest = false;this.objClasses.error = false;}}});</script> </body> </html>

樣式綁定之內聯樣式Style

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title></head> <body><div id="app"><div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div><div v-bind:style='objStyles'></div><div v-bind:style='[objStyles, overrideStyles]'></div><button v-on:click='handle'>切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {borderStyle: '1px solid blue',widthStyle: '100px',heightStyle: '200px',objStyles: {border: '1px solid green',width: '200px',height: '100px'},overrideStyles: {border: '5px solid orange',backgroundColor: 'blue'}},methods: {handle: function(){this.heightStyle = '100px';this.objStyles.width = '100px';}}});</script> </body> </html>

總結

以上是生活随笔為你收集整理的案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： SpringMVC自动将请求参数和入参对
下一篇：分支结构||分支循环结构||使用原生js