Vue.js案例（一）

最新推荐文章于 2024-09-02 10:17:00 发布

Pkuyzh

最新推荐文章于 2024-09-02 10:17:00 发布

阅读量244

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45615602/article/details/103068773

版权

本文介绍了两个Vue.js的应用实例，包括创建一个动态展示内容的跑马灯效果，以及实现一个基本的计算器功能。通过这两个实例，读者可以更深入地理解Vue.js的组件化开发和数据绑定原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跑马灯

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跑马灯</title>
	<script src="vue-2.4.0.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="开始" @click="start">
		<input type="button" value="结束" @click="stop">
		<h4>{{msg}}</h4>
	</div>
	<script>
		/*注意：在Vue实例中，如果想要获取data中的数据或者调用methods的方法必须通过 this.属性名 或 this.方法名 去访问。这里的this表示new出来的实例对象*/
		var vm=new Vue({
			el:'#app',
			data:{
				msg:"今天天气真好，明天天气也很好！！",
				intervalID:null
			},
			methods:{
				start:function(){
					//小方法
					//var _this=this.msg;

					//定义一个循环定时器

					//箭头函数 作用：使内部的this和外部的this保持一致
					
					if(this.intervalID) return;

					this.intervalID=setInterval(()=>{
						//console.log(this.msg);
						var start=this.msg.substring(0,1);
						//获取到后面的所有字符
						var end=this.msg.substring(1);
						//重新拼接得到新的字符串并赋给msg
						this.msg=end+start;
						console.log(this.msg);
					},400);
					
				},
				stop(){
					clearInterval(this.intervalID);
					//每当清除定时器之后需要把intervalID设为空值
					this.intervalID=null;
				}
			}
		})

		//注意 vm实例会监听data上所有的数据变化 只要数据发生改变，就会把数据从data中同步到页面上
		//好处  程序员只需要去关心数据，不需要考虑重新渲染页面
	</script>
</body>
</html>

简易计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1"/>
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="n2"/>
			<input type="button" value="=" @click="calc"/>
			<input type="text" v-model="result"/>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					n1:0,
					n2:0,
					opt:'+',
					result:0
				},
				methods:{
					calc(){
						/*switch(this.opt){
							case '+':
								this.result=parseInt(this.n1)+parseInt(this.n2)
								break;
							case '-':
								this.result=parseInt(this.n1)-parseInt(this.n2)
								break;
							case '*':
								this.result=parseInt(this.n1)*parseInt(this.n2)
								break;
							case '/':
								this.result=parseInt(this.n1)/parseInt(this.n2)
								break;
						}*/
						
						/*this.result=eval('parseInt(this.n1)'+this.opt+'parseInt(this.n2)')*/
						
						this.result=eval(this.n1+this.opt+this.n2)
					}
				}
			})
		</script>
	</body>
</html>