使用Vue.js实现跑马灯与计算器功能

Vue.js

  • 我开始学习了Vue.js啦!Vue.js是什么呢?简单地说,Vue.js 是一个灰常滴热门的前端框架,它是一套构建用户界面的框架,只关注视图层,具有易上手和易整合的特点。(俺觉得:老少咸宜)
  • 我这边做了两个小案例,分别是跑马灯与计算器。

效果演示

- 跑马灯
在这里插入图片描述
 - 计算器
在这里插入图片描述

引用

  • 首先,既然要使用Vue.js做东西,那首先就要引用Vue.js文件 官网下载
    <script src="路径" type="text/javascript" charset="utf-8"></script>

  • 引用成功后,就可以灰常滴快乐地使用它里面的一些 API 了。

    ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

具体实现:

1.Vue - 跑马灯 - (点我获取代码)

  • HTML部分
<div id="app">
    <p>{{info}}</p>
    <input type="button" value="开启" v-on:click="go">
    <input type="button" value="停止" v-on:click="stop">
  </div>
  • JS部分
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
	el: '#app',
	data: {
		info: '点开始我就会滚动呦!点停止我就停了呐!',
		intervalId: null
	},
	methods: {
		go() {
			// 如果当前有定时器在运行,则直接return
			if (this.intervalId != null) {
				return;
			}
			// 开始定时器
			this.intervalId = setInterval(() => {
				this.info = this.info.substring(1) + this.info.substring(0, 1);
			}, 500);
		},
		stop() {
			clearInterval(this.intervalId);
		}
	}
});

  • CSS部分 - (我强迫症,不加上难受)
#app {
	width: 400px;
	height: 200px;
	margin: 100px auto;
	border: 1px solid #000;
	padding-top: 60px;
	box-sizing: border-box;
	background-color: #969;
	border-radius: 50px;
	text-align: center;
}

2.Vue - 计算器 - (点我获取代码)

  • HTML部分
  <div id="app">
			计算器<br>
			<input type="text" v-model="n1"><br>
			<select v-model="opt">
				<option value="0">+</option>
				<option value="1">-</option>
				<option value="2">*</option>
				<option value="3">÷</option>
			</select><br>
			<input type="text" v-model="n2"><br>
			<input type="button" value="=" v-on:click="getResult"><br>
			<input type="text" v-model="result">
		</div>
  • JS部分
	// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
	el: '#app',
	data: {
		n1: 0,
		n2: 0,
		result: 0,
		opt: '0'
	},
	methods: {
		getResult() {
			switch (this.opt) {
				case '0':
					this.result = parseInt(this.n1) + parseInt(this.n2);
					break;
				case '1':
					this.result = parseInt(this.n1) - parseInt(this.n2);
					break;
				case '2':
					this.result = parseInt(this.n1) * parseInt(this.n2);
					break;
				case '3':
					this.result = parseInt(this.n1) / parseInt(this.n2);
					break;
			}
		}
	}
});
  • CSS部分 - (我强迫症,不加上难受)
#app {
	width: 300px;
	height: 200px;
	margin: 100px auto;
	border: 1px solid #000;
	padding-top: 30px;
	box-sizing: border-box;
	background-color: aqua;
	border-radius: 50px;
	text-align: center;
}

结语

啊…大家,好好学习,天天向上!

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读