案例：简单计算器|| 属性绑定||v-model指令的本质||样式绑定
2024-04-09 22:46:57
需求：实现简单的加法计算，分别输入数值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指令的本质||样式绑定相关推荐
- AndroidStudio案例——简单计算器
效果展示 实验内容及步骤 设计一款带有可视化界面的简单计算器,供用户输入数据并查看结果.用户通过点击相应按钮(加减乘除运算符.等号.数字)输入正确的表达式,计算器进行相应的加减乘除运算,且可以进行小数 ...
- PyQt6案例3：简单计算器案例
一.用QT设计师绘制界面保存成ui文件 1.打开QTdesigner 2.选择Dialog without Buttons,并单击"创建"按钮. 3.添加控件. (1)拖拽&quo ...
- Vue_双向绑定解析以及指令介绍
Vue Vue双向绑定解析 为什么Vue可以实现双向绑定? 控制台输入定义好的Vue实例 这里会有get/set方法,在es5之后,可以给变量添加get/set方法,就类似于Java中的get/set ...
- 作业2：简答题、编程实践（简单计算器）、思考题
文章目录 作业2:简答题.编程实践(简单计算器).思考题 1.简答题 2. 编程实践,小游戏 简单计算器 3.思考题 作业2:简答题.编程实践(简单计算器).思考题 1.简答题 解释 游戏对象(Gam ...
- 使用Vue三种方法实现简单计算器
使用Vue三种方法实现简单计算器 代码实现了一个简单的计算器,用户可以在输入框中输入两个数字,选择一个操作符,并点击"等于"按钮,Vue.js会根据用户的输入进行计算,并将结果显示 ...
- 基于iOS的简单计算器(二)
接上一篇基于iOS的简单计算器(一)皆为po主iOS课程的实验内容. 新增界面 高级计算器:能够进行一些高级的运算比如三角函数.阶乘.对数等. 体质计算器:获取用户的身高体重后,反馈用户的体质指数. ...
- VB编程：全局变量控件数组实例简单计算器-12
运行效果: 程序代码: Dim current, prev, choice '全局变量 '-------------这段代码是个额外加上的小测试可以忽略---------- '--------- ...
- 初识安卓--简单计算器（上）
声明: 1.本文章为原创文章,转载注明出处,蟹蟹~ 2.初学安卓,水平有限,还有很多不足和应当修正的地方,欢迎评论指点 先来最终效果图: 计算器效果图2 计算器效果图1 大二的java课程快结束前,想 ...
- Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备 带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解 分支 循环 实现选项卡 分支(if.else if.else) 主要指if.else if.e ...
最新文章
- 5G人才报告 | 买5G手机不用卖肾，有这个就行（全文）
- C#在WinForm中实现清空指定类型控件的内容
- Talairach空间、MNI空间、Native空间、Stereotaxic空间
- 转载：Linux查看设置系统时区
- JSR311发布Restful WebService工程
- 养成这6个编程好习惯，助你减少90%BUG
- python中的孤儿进程
- java 中linux命令参数说明,java中linux命令参数说明
- 使用cadence建封装
- 换脸App爆红引发人脸盗刷担忧？看到支付宝的回应放心了...
- 今天执行grep命令差点把服务器搞崩
- Linux下防止rm -frv 删除错误的解决办法
- php循环，die/exit脚本执行控制，文件载入及错误控制
- html文本文档整人代码,一些bat恶搞代码
- 电报telegramPC电脑端调为中文
- Window10系统下通过SMB协议连接和断开资源服务器
- 我读《非暴力沟通》- 马歇尔 *卢森堡 - 区分观察和评论
- 熊出没机器人光头强_熊出没中光头强太迂腐，这4种物品都能让他身价过亿，却弃而不用...
- sigil 查找替换_使用Sigil提高ePub电子书的质量
- win7cmd闪退_Win7运行bat批处理闪退怎么解决