简单计算器
图：
需求分析：
实现简单的数值累加计算
思路解析：
通过v-model指令实现数值a何数值b的绑定
给计算按钮绑定事件，实现计算逻辑
将结果绑定到对应位置
代码实现：
<body><divid="app"><h1>简单计算器</h1><div><span>数值A:</span><span><inputtype="text"v-model='a'></span></div><div><span>数值B:</span><span><inputtype="text"v-model='b'></span></div><div><buttonv-on:click='handle'>计算</button></div><div><span>计算结果:</span><spanv-text='result'></span></div></div><scripttype="text/javascript"src="js/vue.js"></script><scripttype="text/javascript">/* 简单计算器案例 */var vm=newVue({
el:'#app',
data:{
a:'',
b:'',
result:''},
methods:{
handle:function(){// 实现计算逻辑this.result=parseInt(this.a)+parseInt(this.b);}}});</script></body>选项卡
1.html结构
<divid="app"><divclass="tab"><!-- tab栏 --><ul><liclass="active">apple</li><liclass="">orange</li><liclass="">lemon</li></ul><!-- 对应显示的图片 --><divclass="current"><imgsrc="img/apple.png"></div><divclass=""><imgsrc="img/orange.png"></div><divclass=""><imgsrc="img/lemon.png"></div></div></div>2.提供的数据
list:[{
id: 1,
title:'apple',
path:'img/apple.png'},{
id: 2,
title:'orange',
path:'img/orange.png'},{
id: 3,
title:'lemon',
path:'img/lemon.png'}]3.把数据渲染到页面
- 把tab栏中数据替换到页面上
- 把data中title利用v-for循环渲染到页面上
- 把data中path利用v-for玄幻渲染到页面上
<divid="app"><divclass="tab"><ul><!--
1、绑定key的作用 提高Vue的性能
2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ， index 也是唯一的
3、 item 是 数组中对应的每一项
4、 index 是 每一项的 索引
--><li:key='item.id'v-for='(item,index) in list'>{{item.title}}</li></ul><div:key='item.id'v-for='(item, index) in list'><!-- : 是 v-bind 的简写 绑定属性使用 v-bind --><img:src="item.path"></div></div></div><script>newVue({// 指定 操作元素 是 id 为app 的
el:'#app',
data:{
list:[{
id:1,
title:'apple',
path:'img/apple.png'},{
id:2,
title:'orange',
path:'img/orange.png'},{
id:3,
title:'lemon',
path:'img/lemon.png'}]}})</script>4.给每一个tab栏添加事件,并让选中的高亮
- 4.1让默认的第一项tab栏高亮
- tab栏高亮 通过添加类名active来实现（css avtive的样式已经提前写好）
- 在tab中定义一个默认索引currentlndex为0
- 给第一个li添加active类名
- 通过动态绑定class来实现第一个li的索引为0和current 的值刚好相等
- currentindex ===index 如果相等 则添加类名active 否则 添加空类名
- tab栏高亮 通过添加类名active来实现（css avtive的样式已经提前写好）
- 4.2 让默认的第一栏tab栏对应的div显示
- 实现思路 和第一个tab实现思路一样 只不过 这里控制第一个div显示的类名 是current
<ul><!-- 动态绑定class 有 active 类名高亮 无 active 不高亮--><li:class='currentIndex==index?"active":""':key='item.id'v-for='(item,index) in list'>{{item.title}}</li></ul><!-- 动态绑定class 有 current 类名显示 无 current 隐藏--><div:class='currentIndex==index?"current":""':key='item.id'v-for='(item, index) in list'><!-- : 是 v-bind 的简写 绑定属性使用 v-bind --><img:src="item.path"></div><script>newVue({
el:'#app',
data:{
currentIndex:0,// 选项卡当前的索引 默认为 0
list:[{
id:1,
title:'apple',
path:'img/apple.png'},{
id:2,
title:'orange',
path:'img/orange.png'},{
id:3,
title:'lemon',
path:'img/lemon.png'}]}})</script>- 4.3 点击每一个tab栏 当前的高亮 其他的取消高亮
- 给每一个li添加点击事件
- 让当前的索引index和当前currentindex的值进行比较
- 如果相等 则当前li添加active类名 当前的li高亮 当前对应索引的div添加current当前div显示 其他隐藏
<divid="app"><divclass="tab"><ul><!-- 通过v-on 添加点击事件 需要把当前li 的索引传过去 --><liv-on:click='change(index)':class='currentIndex==index?"active":""':key='item.id'v-for='(item,index) in list'>{{item.title}}</li></ul><div:class='currentIndex==index?"current":""':key='item.id'v-for='(item, index) in list'><img:src="item.path"></div></div></div><script>newVue({
el:'#app',
data:{
currentIndex:0,// 选项卡当前的索引 默认为 0
list:[{
id:1,
title:'apple',
path:'img/apple.png'},{
id:2,
title:'orange',
path:'img/orange.png'},{
id:3,
title:'lemon',
path:'img/lemon.png'}]},
methods:{
change:function(index){// 通过传入过来的索引来让当前的 currentIndex 和点击的index 值 相等// 从而实现 控制类名this.currentIndex= index;}}})</script>