vue基础练习

最新推荐文章于 2022-02-09 18:23:04 发布

wz前端初学者

最新推荐文章于 2022-02-09 18:23:04 发布

阅读量768

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript小练习文章标签：前端 js vue vue.js javascript

本文链接：https://blog.youkuaiyun.com/wz13759497175/article/details/79858249

javascript小练习专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了在Vue.js中使用v-bind、v-if/v-else、v-html、v-for、v-model、v-on指令以及filter和watch进行前端开发的基本实践。

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

效果图如下：

学习目前用到了v-bind，v-if，v-else，v-html插入子节点，v-for循环，v-model，v-on，filter过滤器，watch属性监测等知识

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		#app .change{
			background: black;
			color: white;
		}
		#app .rec{
			width: 100px;
			height: 100px;
		}
	</style>
</head>
<body>
	<div id="app">
	  	<div v-if="seen" v-bind:class="{'change':change}">test</div>
	  	<a v-bind:href="url">4399小游戏</a>
	  	<div v-html="message"></div>
	  	样式改变:<input type="checkbox" name="" v-model="change"><br>
	  	同步输入:<input type="number" name="" v-model="text"><br>
	  	将输入的数乘以5:<br>{{text | five}}<br>
	  	<div v-if="panduan()">您输的数字为偶数</div>
	  	<div v-else>您输的数字不为偶数</div>
	  	<button v-on:click="btn_click">按钮</button>
	  	<ul>
	  		<li v-for="fruit in fruits">
	  			{{fruit}}
	  		</li>
	  	</ul>
	  	<input type="text" name="" v-model="kmH">km/h<br>
	  	<input type="text" name="" v-model="mS">m/s<br>
	  	<div id="result"></div>
	  	请输入颜色:<input type="text" name="" v-model="color">
	  	<div class="rec" v-bind:style="{background:color}"></div>
	</div>
	<script type="text/javascript">
		let a=new Vue({
			el:"#app",
			data:{
				seen:true,
				url:"http://www.4399.com/",
				message:"<h1>Oh interesting?</h1>",
				change:false,
				text:null,
				fruits:["苹果","橘子","西瓜"],
				kmH:0,
				mS:0,
				show:true,
				color:null
			},
			methods:{
				btn_click(){
					alert(this.text);
				},
				panduan(){
					return parseInt(this.text)%2==0;
				}
			},
			//过滤器
			filters:{
				five(value){
					if (!value) return " ";
					return parseInt(value)*5;				
				}
			},
			//对属性进行监听
			watch:{
				kmH(val){
					this.kmH=val,
					this.mS=val/3.6;
				},
				mS(val){
					this.mS=val,
					this.kmH=val*3.6;
				}
			}
		})
		a.$watch("kmH",function(newval,old){
			document.getElementById('result').innerHTML=`原先的值为:${old},新的值为:${newval}`;
		});
	</script>
</body>
</html>