js小练习改成vue-day03_<script for=window event=onusbkeychange >怎么替换成vue的-CSDN博客

本文链接：https://blog.csdn.net/linyiwwy/article/details/105128510

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-1.9.0.js"></script>
	</head>
	<body>
		
		<div>
		大：<input id="in1" class="a" value="a" disabled="disabled" /></br>
		小：<input id="in2" class="a" value="A" disabled="disabled"/></br>
		</div>
		<button id="btn3">变大小</button>
		</br></br>
		<div>
			<input id="in" value="a" disabled="disabled" /></br>
			<button id="btn1">变大</button>
			<button id="btn2">变小</button>
		</div>		
		<script>
			//方法一
			$(function(){
				$("#btn3").click(function(){
					$(".a").val(function(index,value){
						return index>0?value.toLowerCase():value.toUpperCase();
					});
					
				})				
			})
			
			// 方法二
			$(function() {
				$("#btn1").click(function() {
					$("#in").val(function(index, oldvalue) {
						return oldvalue.toUpperCase();
					})
				})
				$("#btn2").click(function() {
				
					$("#in").val(function(index, oldvalue) {
						return oldvalue.toLowerCase();
					})
				})
			})
			
		</script>
	</body>
</html>

vue实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div  id="app">
			<div>
			变大：<input id="in1" class="a" disabled="disabled" v-model="one" /></br>
			变小：<input id="in2" class="a" disabled="disabled" v-model="two" /></br>
		
			</div>
			<button id="btn3" @click = "a()">变大小</button>
			</br></br>
			<div>
				<input id="in"  disabled="disabled" v-model="three"/></br>
				<button id="btn1" @click="b()">变大</button>
				<button id="btn2" @click="c()">变小</button>
			</div>	
			
		</div>
			
		<script>
			new Vue({
				el: "#app",
				data: {
					one: "a",
					two: "A",
					three: "a"
				},
				methods: {
					a(){	
						this.one = this.one.toUpperCase()
						this.two = this.two.toLowerCase();
					},
					b(){						
						this.three = this.three.toUpperCase()
					},
					c(){
						this.three = this.three.toLowerCase();
					}
				}
			})
		</script>
	</body>
</html>