使用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;
}

结语

啊…大家，好好学习，天天向上！