<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="load()">
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
<form action="" style="text-align: center;" onsubmit="subfn()">
<input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
<input id="b1" type="submit" value="提交">
<input id="b1" type="button" value="单击事件" onclick="fn1()">
</form>
<br><br><br>
<table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center" class="data">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center" class="data">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>很优秀</td>
</tr>
<tr align="center" class="data">
<td>003</td>
<td>王五</td>
<td>83</td>
<td>很努力，不错</td>
</tr>
<tr align="center" class="data">
<td>004</td>
<td>赵六</td>
<td>98</td>
<td>666</td>
</tr>
</table>
</body>
<script>
function on(){
alert("按钮1被点击了")
}
document.getElementById('btn2').onclick=function(){
alert("按钮2被点击了")
}
//onload:页面/元素加载完成后触发
function load(){
console.log("页面加载完成。。。")
}
//onclick：鼠标点击事件
function bfn(){
console.log("失去焦点。。。");
}
//onfocus：元素获得焦点
function ffn(){
console.log("获得焦点。。。");
}
//onkeydown:某个键盘的键被按下
function kfn(){
console.log("键盘被按下了。。。");
}
//onmouseover:鼠标移动到元素之上
function over(){
console.log("鼠标移入了。。。");
}
//onmouseout:鼠标移出某元素
function out(){
console.log("鼠标移出了。。。");
}
//onsubmit：提交表单事件
function subfn(){
alert("表单被提交。。。");
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 定义视图 -->
<div id="app">
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<input type="text" v-model="url">
<br><br>
<input type="button" value="点我一下" v-on:click="handle()">
<input type="button" value="点我一下" @click="handle()"> <!--简写 -->
<br><br>
年龄<input type="text" v-model="age">经判定 ,为 :
<span v-if="age <= 35">年轻人 (35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人 (35-60)</span>
<span v-else>老年人 (60及以上)</span>
<br><br>
年龄<input type="text" v-model="age">经判定 ,为 :
<span v-show="age <= 35">年轻人 (35及以下)</span>
<span v-show="age > 35 && age < 60">中年人 (35-60)</span>
<span v-show>老年人 (60及以上)</span>
<br><br>
<div v-for="addr in addrs">{{addr}}</div>
<hr>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>
</body>
<script>
//定义vue对象
new Vue({
el:'#app',//vue接管的区域
data:{
url:"https://www.baidu.com"
},
methods: {
handle:function(){
alert("你点我了一下");
}
},
data:{
age:20
},
methods:{
},
data:{
addrs:["北京","上海","西安","成都"]
},
methods:{
}
})
</script>
</html>
4336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
