changes
This commit is contained in:
Code12121
parent
54849c49fd
commit
8f902494fc
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.model{
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
margin: 20px;
|
||||
}
|
||||
.item::after{
|
||||
content: "123";
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.item{
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
}
|
||||
.name,
|
||||
.price{
|
||||
font-size: 30px;
|
||||
margin: 20px;
|
||||
}
|
||||
.price{
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.name{
|
||||
text-align: left;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.items{
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="model">{{message}}</div>
|
||||
<div class="items">
|
||||
<div class="item">
|
||||
<div class="name" v-for="names in name">{{names}}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="price" v-for="prices in price">{{prices}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script>
|
||||
let tables=new Vue({
|
||||
el:".model",
|
||||
data:{
|
||||
message:"水果价格表"
|
||||
}
|
||||
})
|
||||
let item=new Vue({
|
||||
el:".items",
|
||||
data:{
|
||||
name:["苹果","香蕉","桃子","李子","山竹","樱桃","葡萄","西瓜"],
|
||||
price:["10￥","3￥","5￥","7￥","13￥","12￥","8￥","10￥"],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>表格</title>
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
table{
|
||||
font-size: 20px;
|
||||
margin: 25% auto;
|
||||
width: 400px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
border:none ;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table cellspacing="5" cellpadding="10" border="1px solid #f00" id="tables">
|
||||
<tr>
|
||||
<td v-for="name in names" >{{name}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td v-for="items in item">{{items}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script>
|
||||
let table=new Vue({
|
||||
el:"#tables",
|
||||
data:{
|
||||
names:["数慧","艺术","品味"],
|
||||
item:["价值","人生","思想"],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>计时器</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.count{
|
||||
width: 200px;
|
||||
line-height: 200px;
|
||||
font-size: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
button{
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
}
|
||||
#count{
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="count">
|
||||
<h1>点击按扭进行{{version}}</h1>
|
||||
<div class="count">{{num}}</div>
|
||||
<button v-on:click=add>+</button>
|
||||
<button v-on:click="clean">清空</button>
|
||||
<button v-on:click="sub">-</button>
|
||||
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#count",
|
||||
data:{
|
||||
version:"改变",
|
||||
num:0
|
||||
},
|
||||
methods: {
|
||||
add:function(){
|
||||
this.version="添加"
|
||||
this.num+=Math.ceil(Math.random()*100+22);
|
||||
},
|
||||
sub:function(){
|
||||
this.version="减少"
|
||||
this.num-=Math.ceil(Math.random()*100+1)
|
||||
},
|
||||
clean:function(){
|
||||
this.num=0
|
||||
this.version="改变"
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
[v-cloak]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
{{welcome+" "+name}}
|
||||
<div id="content" v-once>{{content}}</div>
|
||||
<div v-html=html>123</div>
|
||||
<div v-pre>{{you rise me up}}</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
setTimeout(function(){
|
||||
let tip=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
welcome:"你好",
|
||||
name:"李晓晓",
|
||||
content:"欢迎进入到首页",
|
||||
html:"<a href='https://www.bilibili.com'>B站</a>",
|
||||
}
|
||||
|
||||
})
|
||||
},5000)
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<img v-bind:src="href" alt="">
|
||||
<a v-bind:href="aLinkHref">{{name}}</a>
|
||||
<img :src="imgHref" alt="">
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
href:"https://vuejs.bootcss.com/images/components.png",
|
||||
name:"百度",
|
||||
aLinkHref:"https://www.baidu.com",
|
||||
imgHref:"https://ts1.cn.mm.bing.net/th/id/R-C.28698ff68d29b24c4c26f8bd14b5de22?rik=DF9oROk0o62kUQ&riu=http%3a%2f%2fblog.amio.io%2fcontent%2fimages%2f2019%2f06%2fvue-3.png&ehk=P0xnsaLXQzpjJSzeLmoTeRFH3HL%2f9pypNxzgk6F8T%2fU%3d&risl=&pid=ImgRaw&r=0"
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div :style="ChangeStyles()">你好</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
isColor:"red",
|
||||
isSize:"40"
|
||||
},
|
||||
methods: {
|
||||
ChangeStyles:function(){
|
||||
return {color:this.isColor,fontSize:this.isSize+`px`}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.active{
|
||||
color: #f00;
|
||||
|
||||
font-weight: bolder;
|
||||
}
|
||||
.btn{
|
||||
color: #00f;
|
||||
|
||||
}
|
||||
button{
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div :class="cons()">{{content}}</div>
|
||||
<button v-on:click="change()" :class="btns()">点击我变色</button>
|
||||
</div>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
content:"欢迎你",
|
||||
isActive:true,
|
||||
isbtn:false
|
||||
},
|
||||
methods: {
|
||||
change:function(){
|
||||
this.isActive=!this.isActive
|
||||
this.isbtn=!this.isbtn
|
||||
},
|
||||
cons:function(){
|
||||
return {active:this.isActive}
|
||||
},
|
||||
btns:function(){
|
||||
return {btn:this.isbtn}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>动态导航</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#nav{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
div{
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
}
|
||||
.item{
|
||||
background-color: blueviolet;
|
||||
line-height:50px ;
|
||||
font-size: 18px;
|
||||
|
||||
font-weight: bolder;
|
||||
border-radius: 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.active{
|
||||
background-color: skyblue;
|
||||
}
|
||||
[v-cloak]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="nav" v-cloak>
|
||||
<div :class="contents(index)" @click="change(index)" v-for="(items,index) in content" class="item">{{items}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#nav",
|
||||
data:{
|
||||
content:["首页","搜索","人文","新闻","法制","联系我们"],
|
||||
isActive:true,
|
||||
courseindex:-1,
|
||||
},
|
||||
methods: {
|
||||
change:function(index){
|
||||
this.courseindex=index
|
||||
},
|
||||
contents:function(index){
|
||||
if(index==this.courseindex){
|
||||
return {active:this.isActive}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
margin: 0 33%;
|
||||
}
|
||||
.con,.active{
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.con{
|
||||
background-color: cadetblue;
|
||||
}
|
||||
.active{
|
||||
background-color: coral;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div :class="isChange()" v-on:click="change">{{content}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
content:"你好呀",
|
||||
isCon:false,
|
||||
isActive:true
|
||||
},
|
||||
methods: {
|
||||
isChange:function(){
|
||||
return {con:this.isCon,active:this.isActive}
|
||||
},
|
||||
change:function(){
|
||||
this.isCon=true
|
||||
this.isActive=!this.isActive
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
li{
|
||||
font-size: 22px;
|
||||
font-weight: bolder;
|
||||
margin: 20px auto;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
background-color: aqua;
|
||||
padding: 20px;
|
||||
}
|
||||
.active{
|
||||
background-color: blanchedalmond;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="app">
|
||||
<li v-for="li,i in lists" :class="isClass()" v-on:click="change(i)">{{li}}</li>
|
||||
</ul>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
lists:["Vue框架设计","大数据原理与应用","数据仓库与数据挖掘","数据库管理","大数据认证","网络爬虫"],
|
||||
isActive:true,
|
||||
},
|
||||
methods: {
|
||||
change:function(i){
|
||||
this.isActive=!this.isActive
|
||||
console.log(i);
|
||||
},
|
||||
isClass:function(){
|
||||
return {active:this.isActive}
|
||||
}
|
||||
},
|
||||
}
|
||||
)
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tip,div{
|
||||
width: 200px;
|
||||
line-height: 200px;
|
||||
margin: 20px auto;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
#app>div{
|
||||
border: 1px solid #ff0;
|
||||
}
|
||||
.tip{
|
||||
text-decoration: underline;
|
||||
border:1px solid rgba(0, 23, 244, 0.5) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-on:click="click_on()" :class="ChangeClasses">{{nums}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
nums:0,
|
||||
isTip:false,
|
||||
},
|
||||
methods: {
|
||||
click_on:function(){
|
||||
let times=setInterval(()=>{
|
||||
this.nums=Math.ceil(Math.random()*999+1);
|
||||
if (this.nums%2==0&&this.nums%3==0&&this.nums%4==0){
|
||||
this.isTip=!this.isTip
|
||||
}
|
||||
},2000)
|
||||
},
|
||||
ChangeClasses:function (){
|
||||
return {tip:isTip}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>{{fullName}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
sex:"tom",
|
||||
name:"bother"
|
||||
},
|
||||
computed:{
|
||||
fullName:function(){
|
||||
return this.sex+" "+this.name
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- <div>{{fullName}}</div>
|
||||
<div>{{fullName}}</div>
|
||||
<div>{{fullName}}</div>
|
||||
<div>{{fullName}}</div> -->
|
||||
|
||||
<div>{{fullName()}}</div>
|
||||
<div>{{fullName()}}</div>
|
||||
<div>{{fullName()}}</div>
|
||||
<div>{{fullName()}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
surname:"Tom",
|
||||
name:"Json"
|
||||
},
|
||||
methods: {
|
||||
fullName:function(){
|
||||
console.log(123);
|
||||
return this.surname+" "+this.name
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
/*一般传到computed属性里的对象都是get属性，因此如果我们特意想改内容就必须使用set属性*/
|
||||
// fullName:{
|
||||
|
||||
// set:function(val){
|
||||
// let value=val.split(" ")
|
||||
// this.surname=value[0]
|
||||
// this.name=value[1]
|
||||
// console.log(surname);
|
||||
// },
|
||||
// get:function(){
|
||||
// console.log("123");
|
||||
// return this.surname+" "+this.name
|
||||
// }
|
||||
// }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" >
|
||||
{{fullname}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
family_Name:"陈",
|
||||
Name:"天恩"
|
||||
},
|
||||
computed:{
|
||||
fullname:{
|
||||
set:function(val){
|
||||
let string=val.split(" ");
|
||||
this.family_Name=string[0]
|
||||
this.Name=string[1]
|
||||
},
|
||||
get:function(){
|
||||
return this.family_Name+" "+this.Name
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>标签的变化</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
}
|
||||
button{
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
margin: 0 20px;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
background-color: bisque;
|
||||
border-radius: 5px;
|
||||
float: none;
|
||||
}
|
||||
.content,
|
||||
.hello{
|
||||
border: 1px double #f00;
|
||||
border-radius: 10px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.content{
|
||||
width: 200px;
|
||||
line-height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.hello{
|
||||
width: 80px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.active{
|
||||
color: #f00;
|
||||
font-weight: bolder;
|
||||
}
|
||||
[v-cloak]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div class="content" :class="getClasses()" v-for="cons in datas">
|
||||
{{cons}}
|
||||
</div>
|
||||
<div>
|
||||
<button @click="defines()">确定</button>
|
||||
<button @click="cancels()">取消</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
html:`
|
||||
<div class="hello">
|
||||
你好呀
|
||||
</div>
|
||||
`,
|
||||
datas:["网站建设中","网站建设中","网站建设中","网站建设中","网站建设中","网站建设中","网站建设中"],
|
||||
isActive:false
|
||||
},
|
||||
methods: {
|
||||
defines(){
|
||||
this.isActive=true
|
||||
},
|
||||
cancels(){
|
||||
this.isActive=false
|
||||
},
|
||||
getClasses(){
|
||||
return {active:this.isActive}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
border: 1px solid #f00;
|
||||
padding: 100px;
|
||||
font-size: 20px;
|
||||
font-weight: bolder;
|
||||
margin: 20px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" :style="BcChange()">
|
||||
{{data}}
|
||||
<button @click="Clickme()">点击我</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
data:"你好呀",
|
||||
isStyle:`#ff0`
|
||||
},
|
||||
methods: {
|
||||
BcChange:function(){
|
||||
return {backgroundColor:this.isStyle}
|
||||
},
|
||||
Clickme:function(){
|
||||
this.isStyle="rgb(23,23,21)"
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
你所购买的图书需要{{total}}元
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let sum=0
|
||||
let fun=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
books:[
|
||||
{bid:"01",bname:"会计基础与进阶",bprice:30},
|
||||
{bid:"02",bname:"C语言从入门到精通",bprice:50},
|
||||
{bid:"03",bname:"C语言基础",bprice:200},
|
||||
{bid:"04",bname:"java从小白到大神",bprice:122},
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
total:function(){
|
||||
for(let book of this.books){
|
||||
sum+=book.bprice
|
||||
}
|
||||
return sum
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
display: inline-block;
|
||||
margin:20px;
|
||||
list-style: none;
|
||||
}
|
||||
li{
|
||||
margin: 33.33px 100px;
|
||||
}
|
||||
div,
|
||||
li,
|
||||
.title{
|
||||
font-size: 22px;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
}
|
||||
[v-cloak]{
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div class="title">大三大数据专业课程</div>
|
||||
<ul>
|
||||
<li>课程号</li>
|
||||
<li v-for="index in course" >{{index.cid}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>课程名</li>
|
||||
<li v-for="index in course">{{index.cname}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>学分</li>
|
||||
<li v-for="index in course">{{index.ctime}}</li>
|
||||
</ul>
|
||||
<div>总学分：{{total}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let Counts=0
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
course:[
|
||||
{cid:"202201",cname:"响应式网页设计",ctime:2},
|
||||
{cid:"202202",cname:"大数据原理与应用",ctime:4},
|
||||
{cid:"202203",cname:"数据仓库与数据挖掘",ctime:4},
|
||||
{cid:"202204",cname:"数据库管理",ctime:2},
|
||||
{cid:"202205",cname:"大数据认证",ctime:2},
|
||||
{cid:"202206",cname:"网络爬虫",ctime:4},
|
||||
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
total:{
|
||||
get:function(){
|
||||
for (let index of this.course){
|
||||
Counts+=index.ctime
|
||||
}
|
||||
return Counts
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
我的姓名是{{fullname}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
full:"陈",
|
||||
name:"天恩",
|
||||
},
|
||||
computed:{
|
||||
fullname:{
|
||||
set:function(val){
|
||||
let vals=val.split(" ")
|
||||
let xing=vals[0]
|
||||
let ming=vals[1]
|
||||
return xing+" "+ming
|
||||
},
|
||||
get:function(){
|
||||
return this.full+" "+this.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
//ES5对象赋值时的写法
|
||||
// let name="张一凡";
|
||||
// let age=23;
|
||||
// let address="翻斗花园";
|
||||
// const app={
|
||||
// name:name,
|
||||
// age:age,
|
||||
// address:address,
|
||||
// }
|
||||
//<--这是ES6对象增强写法-->
|
||||
let name="张一凡";
|
||||
let age=23;
|
||||
let address="翻斗花园";
|
||||
const app={
|
||||
name,
|
||||
age,
|
||||
address,
|
||||
}
|
||||
//这是ES5函数的写法
|
||||
const fun={
|
||||
//这是ES5函数的写法
|
||||
look:function(){
|
||||
|
||||
},
|
||||
//这是ES6函数的写法
|
||||
run(){
|
||||
|
||||
}
|
||||
}
|
||||
console.log(app);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app>div{
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
li{
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>总数量：{{PrintSummer}}</div>
|
||||
<ul>
|
||||
<li :style="isChangeStyle()" v-for="list in item">{{list}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let sum=0;
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
item:[
|
||||
{bid:01,name:"vue实验指南",count:66},
|
||||
{bid:02,name:"C Primser",count:13},
|
||||
{bid:01,name:"零基础学python",count:34},
|
||||
{bid:01,name:"java程序设计",count:55},
|
||||
{bid:01,name:"python从入门到精通",count:76},
|
||||
],
|
||||
isFontSize:"20px",
|
||||
isColor:"#f00",
|
||||
},
|
||||
methods: {
|
||||
isChangeStyle(){
|
||||
return {fontSize:this.isFontSize,color:this.isColor}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
|
||||
PrintSummer(){
|
||||
//推荐写法： for(let book of this.item){
|
||||
// sum+=book.count;
|
||||
// }
|
||||
// for(let book in this.item){
|
||||
// sum+=this.item[book].count
|
||||
// }
|
||||
// return sum;
|
||||
// for(let i=0;i<this.item.length;i++){
|
||||
// sum+=this.item[i].count
|
||||
// }
|
||||
// return sum
|
||||
for(let book of this.item){
|
||||
sum+=book.count
|
||||
}
|
||||
return sum
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>学生书籍总数量：{{BookCounts}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
/*
|
||||
for循环ES6语法格式：for(变量 of 数组)
|
||||
输出数据的插值语法内容调用的是computed的属性
|
||||
|
||||
*/
|
||||
let sum=0
|
||||
let vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
items:[
|
||||
{"sid":"2020103501","sname":"陈天恩","sbook":123},
|
||||
{"sid":"2020103502","sname":"窦兴","sbook":6},
|
||||
{"sid":"2020103503","sname":"蒋凯亮","sbook":9},
|
||||
{"sid":"2020103504","sname":"龚浩","sbook":20},
|
||||
{"sid":"2020103505","sname":"聂靖涛","sbook":8},
|
||||
{"sid":"2020103506","sname":"颜瑞景","sbook":10},
|
||||
{"sid":"2020103507","sname":"张可荣","sbook":3},
|
||||
{"sid":"2020103508","sname":"张天赐","sbook":8},
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
BookCounts:function(){
|
||||
for(let book of this.items){
|
||||
sum+=book.sbook;
|
||||
}
|
||||
return sum
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width: 100px;
|
||||
height: 200px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 1、阻止事件冒泡：属性.stop
|
||||
2、取消表格自动提交 属性.prevent
|
||||
3、当执行一个操作所反应的一个事件
|
||||
4、让这次操作只执行一次
|
||||
-->
|
||||
<div id="app" @click="divcl">
|
||||
<div>
|
||||
<button @click.stop="btncl1">按钮1</button>
|
||||
</div>
|
||||
<div>
|
||||
<form action="https://www.bilibili.com">
|
||||
<input type="submit" value="提交" @click.prevent.stop="submits">
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<from><input type="text" @keyup.enter="key"></from>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
methods: {
|
||||
btncl1(){
|
||||
console.log("你在点击按钮");
|
||||
},
|
||||
divcl(){
|
||||
console.log("你在点击div");
|
||||
},
|
||||
submits(){
|
||||
console.log("提交完成");
|
||||
},
|
||||
key(){
|
||||
console.log("执行退出完毕");
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!--
|
||||
1、当方法需要参数而不传参那么默认就会传递event对象
|
||||
2、当方法需要两个以上参数，并且传递event对象，那么就需要手动传递event对象：$event
|
||||
3、传递什么参数就打印什么参数
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.change{
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<button @click="clickon(1)">按钮1</button>
|
||||
<button @click="clickon(1,$event)" class="">按钮2</button>
|
||||
<button @click="clickon3">按钮3</button>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
methods: {
|
||||
clickon(val,event){
|
||||
if(event.target.className=="" ){
|
||||
event.target.className="change"
|
||||
|
||||
}
|
||||
},
|
||||
clickon3(val){
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
}
|
||||
.BShower{
|
||||
width: 800px;
|
||||
line-height: 400px;
|
||||
background-color:aliceblue;
|
||||
margin: 50px auto;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
color: aquamarine;
|
||||
border-radius: 10px;
|
||||
}
|
||||
button{
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
margin: 0 50px;
|
||||
border: 1px solid gray;
|
||||
background-color: azure;
|
||||
border-radius: 5px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.random{
|
||||
width: 500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="BShower" >{{count}}</div>
|
||||
<button class="submit" @click="isAdd()">添加</button>
|
||||
<button class="random" @mousemove="isRandom()">请在这个范围移动将进行随机数</button>
|
||||
<button class="cancel" @click="isRemove()">减少</button>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
count:1,
|
||||
},
|
||||
methods: {
|
||||
isAdd(){
|
||||
this.count+=Math.ceil(Math.random()*9999+1000)
|
||||
},
|
||||
isRemove(){
|
||||
this.count-=Math.ceil(Math.random()*9999+1000)
|
||||
},
|
||||
isRandom(){
|
||||
let n=Math.ceil(Math.random()*9999+1);
|
||||
this.count=n
|
||||
},
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
{{fulltext}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
full:"你好",
|
||||
text:"世界",
|
||||
},
|
||||
computed:{
|
||||
fulltext:{
|
||||
set:function(val){
|
||||
const word=val.split(" ")
|
||||
this.full=word[0]
|
||||
this.text=word[1]
|
||||
},
|
||||
get:function(){
|
||||
return this.full+" "+this.text
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
button{
|
||||
margin: 10px 20px;
|
||||
}
|
||||
#app{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input,
|
||||
button{
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
}
|
||||
input{
|
||||
width: 200px;
|
||||
padding: 0 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
.btn{
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
background-color: bisque;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--
|
||||
stop阻止事件冒泡
|
||||
事件.keycode/keyname 执行某个内容自动进行操作响应
|
||||
prevent阻止表单自动提交
|
||||
once当前内容只执行一次
|
||||
-->
|
||||
<div id="app">
|
||||
<button @click="btnC1(1)">参数传递1</button>
|
||||
<button @click="btnC2">参数传递2</button>
|
||||
<button @click="btnC3(1,$event)">参数传递3</button>
|
||||
<!-- 手动传递当前点击事件 $event-->
|
||||
<div class="btn" @click="Btnmp()">
|
||||
<button @click.stop="BtnMp()">停止事件冒泡</button>
|
||||
</div>
|
||||
<div class="form">
|
||||
<form action="https://www.baidu.com/s">
|
||||
<input type="text" placeholder="请输入数据后搜索内容" name="wd" @keyup.enter="submit()">
|
||||
<button type="submit" @click.prevent>提交</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
methods: {
|
||||
btnC1(val){
|
||||
console.log(val);
|
||||
},
|
||||
btnC2(val){
|
||||
console.log(val.target);
|
||||
},
|
||||
btnC3(val,event){
|
||||
console.log(val,event.target);
|
||||
},
|
||||
BtnMp(){
|
||||
console.log("正在单击按钮");
|
||||
},
|
||||
Btnmp(){
|
||||
console.log("正在单击div");
|
||||
},
|
||||
submit(){
|
||||
console.log("提交数据成功");
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 20px;
|
||||
display: inline-block;
|
||||
background-color: aquamarine;
|
||||
}
|
||||
ul{
|
||||
text-align: center;
|
||||
margin: 100px 0;
|
||||
}
|
||||
.active{
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
<li :class="isActive()" @click="isChangeColor()"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
isActives:false
|
||||
},
|
||||
methods: {
|
||||
isActive:function(){
|
||||
return {active:this.isActives}
|
||||
},
|
||||
isChangeColor:function(){
|
||||
this.isActives=!this.isActives
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
}
|
||||
div,li{
|
||||
font-size: 22px;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 20px 50px;
|
||||
}
|
||||
li{
|
||||
margin: 50px 200px;
|
||||
}
|
||||
div{
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
注意点
|
||||
1、可以使用插值语法输出对象数组里面的值
|
||||
2、统计数据格式[{}]
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>统计所现有的书籍藏书量</div>
|
||||
<ul>
|
||||
<li v-for="books in boks">{{books.bn}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-for="num in boks">{{num.sum}}</li>
|
||||
</ul>
|
||||
<div>总共藏书{{C_Book}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
let count=0
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
boks:[
|
||||
{bid:01,bn:"朝花夕拾",sum:20},
|
||||
{bid:02,bn:"战争与和平",sum:77},
|
||||
{bid:03,bn:"西游记",sum:32},
|
||||
{bid:04,bn:"鲁滨逊漂流记",sum:88},
|
||||
{bid:05,bn:"朝花夕拾",sum:45},
|
||||
{bid:06,bn:"骆驼祥子",sum:45},
|
||||
{bid:07,bn:"巴黎圣母院",sum:44}
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
C_Book(){
|
||||
let count=0
|
||||
for(let bk of this.boks){
|
||||
count+=bk.sum
|
||||
}
|
||||
// for (let index = 0; index < this.boks.length; index++) {
|
||||
// console.log(index);
|
||||
// }
|
||||
return count
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 20px 200px;
|
||||
}
|
||||
li{
|
||||
|
||||
font-weight: bolder;
|
||||
margin: 50px 10px;
|
||||
}
|
||||
div,
|
||||
ul,
|
||||
li{
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li>书籍</li>
|
||||
<li v-for="bok in book">{{bok.bname}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>数量</li>
|
||||
<li v-for="bok in book">{{bok.count}}</li>
|
||||
</ul>
|
||||
<div>总数量{{isCount}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
book:[
|
||||
{bid:"001",bname:"西游记",count:200},
|
||||
{bid:"002",bname:"红楼梦",count:90},
|
||||
{bid:"003",bname:"水吴传",count:230},
|
||||
{bid:"004",bname:"三国演义",count:80},
|
||||
],
|
||||
},
|
||||
computed:{
|
||||
isCount(){
|
||||
let counts=0
|
||||
for (let i of this.book){
|
||||
counts+=i.count
|
||||
}
|
||||
return counts
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
div,li{
|
||||
font-size: 22px;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 20px 50px;
|
||||
}
|
||||
li{
|
||||
|
||||
margin: 10px 200px;
|
||||
}
|
||||
div{
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div>复习购买书籍的总价钱</div>
|
||||
<ul>
|
||||
<li v-for="bks in Book">{{bks.bname}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li v-for="bks in Book">{{bks.price}}</li>
|
||||
</ul>
|
||||
<div>总共{{totalPrices}}元</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
Book:[
|
||||
{bid:2132,bname:"云计算理论与实践",price:77},
|
||||
{bid:2442,bname:"Linux从入门到精通",price:133},
|
||||
{bid:2122,bname:"Java项目实战",price:177},
|
||||
{bid:2444,bname:"网络爬虫基础与进阶",price:155},
|
||||
{bid:2765,bname:"爬虫与反爬虫",price:99},
|
||||
{bid:2990,bname:"C primer",price:88},
|
||||
{bid:2134,bname:"Python项目实战",price:77},
|
||||
]
|
||||
},
|
||||
computed:{
|
||||
totalPrices(){
|
||||
let count=0;
|
||||
let Books
|
||||
for (Books of this.Book){
|
||||
count+=Books.price
|
||||
}
|
||||
console.log(Books.bid);
|
||||
return count
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.part{
|
||||
text-align: center;
|
||||
}
|
||||
ul{
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
|
||||
margin: 5% 20%;
|
||||
}
|
||||
li{
|
||||
margin: 30% 0;
|
||||
}
|
||||
[v-cloak]{
|
||||
display:none
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div class="part">
|
||||
<div>下列选中学生的成绩等级为</div>
|
||||
<ul>
|
||||
<li>学生</li>
|
||||
<li v-for="stus in stu" >{{stus.stuname}}</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>成绩</li>
|
||||
<li v-for="stus in stu" @click="Change_Score">{{stus.score}}</li>
|
||||
</ul>
|
||||
<div>你的成绩等级是{{Grade_Score}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
stu:[
|
||||
{stuid:201,stuname:"张三",score:98},
|
||||
{stuid:202,stuname:"李四",score:87},
|
||||
{stuid:203,stuname:"王五",score:67},
|
||||
{stuid:204,stuname:"老七",score:88},
|
||||
{stuid:205,stuname:"琪琪",score:90},
|
||||
],
|
||||
score:0
|
||||
},
|
||||
methods: {
|
||||
Change_Score(event){
|
||||
this.score=event.target.innerText
|
||||
},
|
||||
},
|
||||
computed:{
|
||||
Grade_Score(){
|
||||
if(this.score>=90 && this.score<=100){
|
||||
return "优秀"
|
||||
}else if(this.score>=80){
|
||||
return "中等"
|
||||
}else if(this.score>=70){
|
||||
return "良好"
|
||||
}else if(this.score>=60){
|
||||
return "及格"
|
||||
}else{
|
||||
return "不及格"
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>
|
||||
<form action="https://www.baidu.com/s">
|
||||
<div v-if="isChange">
|
||||
<label for="">用户账号</label>
|
||||
<input type="text" placeholder="请输入用户账户" key="username">
|
||||
</div>
|
||||
<div v-else>
|
||||
<label for="">用户邮箱</label>
|
||||
<input type="text" placeholder="请输入用户邮箱" key="email">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<button @click="ChangeModel()">切换</button>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
isChange:true
|
||||
},
|
||||
methods: {
|
||||
ChangeModel(){
|
||||
this.isChange=!this.isChange
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
input{
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
font-size: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
.frontChange{
|
||||
color: blueviolet;
|
||||
}
|
||||
.Active{
|
||||
color: yellowgreen;
|
||||
}
|
||||
input[placeholder="请写入提交两字进行回车"]{
|
||||
width: 180px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
padding: 5px;
|
||||
}
|
||||
button{
|
||||
width: 180px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<form action="https://cn.bing.com/search?q=" id="forms">
|
||||
<input type="text" placeholder="请输入你的查询第一个信息" v-if="TypeChange" key="username" class="frontChange" name="q" :class="isChangeColor()">
|
||||
<input type="text" placeholder="请输入你的查询第二个信息" v-else key="email" name="q" class="frontChange">
|
||||
<button @click.prevent="isTypeChange()">查询切换</button>
|
||||
<input type="text" placeholder="请写入提交两字进行回车" @keypress.enter="Submit" >
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
TypeChange:true,
|
||||
ChangeColor:false
|
||||
},
|
||||
methods: {
|
||||
isTypeChange(){
|
||||
this.TypeChange=!this.TypeChange
|
||||
this.ChangeColor=!this.ChangeColor
|
||||
},
|
||||
isChangeColor(){
|
||||
return {Active:this.isChangeColor}
|
||||
},
|
||||
Submit(event){
|
||||
let word=event.target.value
|
||||
if(word!="提交"){
|
||||
event.target.value="请重新输入"
|
||||
}else{
|
||||
forms.submit()
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
// filter对li的数据进行过滤
|
||||
//map对数值进行操作*2
|
||||
//reduce对数值进行累加操作
|
||||
const li=[1,2,3,4,5,6,7,8,9]
|
||||
let result=li.filter(function(li){
|
||||
return li<5
|
||||
}).map(
|
||||
function(n){
|
||||
return n*2
|
||||
}
|
||||
).reduce(function(pre,n){
|
||||
return n+pre
|
||||
},0)
|
||||
console.log(result);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-for="item,key,index in info">{{item}}的键是{{key}}他所在的下标为{{index}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
info:{id:201,name:"小浠",add:"none"}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#app{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
ul{
|
||||
width: 80%;
|
||||
height: 200px;
|
||||
border: 1px solid #000;
|
||||
margin: 20px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
li{
|
||||
|
||||
font-size: 18px;
|
||||
width: 80px;
|
||||
line-height: 50px;
|
||||
background-color: red;
|
||||
display: inline-block;
|
||||
margin: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
cursor:pointer;
|
||||
}
|
||||
button{
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
}
|
||||
button{
|
||||
margin: 0 100px;
|
||||
}
|
||||
.active{
|
||||
background-color: blanchedalmond;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="num,value in list" @click="Clickme(value,$event)" :class="SetClasses(value)">{{num}}</li>
|
||||
</ul>
|
||||
<div class="btn">
|
||||
<button @click="LoadDatas()">载入数据</button>
|
||||
<button @click="ClearDates()">清空数据</button>
|
||||
</div>
|
||||
<div>
|
||||
<ul v-for="value in li_new_list" style="width:0;height:0">
|
||||
<li>{{value}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:[],
|
||||
li_new_list:[],
|
||||
thisIndex:-1,
|
||||
ChangeColor: { active: true }
|
||||
},
|
||||
methods: {
|
||||
LoadDatas(){
|
||||
for (let i=0;i<100;i++){
|
||||
let num=Math.ceil(Math.random()*100+10)
|
||||
this.list.push(num)
|
||||
}
|
||||
},
|
||||
ClearDates(){
|
||||
this.list=[]
|
||||
this.li_new_list = []
|
||||
},
|
||||
Clickme(index,event){
|
||||
this.thisIndex=index
|
||||
this.li_new_list.push(event.target.innerText + ",")
|
||||
},
|
||||
SetClasses(value){
|
||||
if(this.thisIndex==value){
|
||||
return this.ChangeColor
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="item in list" :key="item">{{item}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:['a','b','c','d']
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
display: flex;
|
||||
list-style: none;
|
||||
justify-content: center;
|
||||
}
|
||||
li{
|
||||
margin:1%;
|
||||
font-size: 22px;
|
||||
width: 200px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
background-color: aqua;
|
||||
border-radius: 5px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.active{
|
||||
background-color:wheat;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="(item,index) in list" :style=li() @click="Clickme(index)" :class="ChangeModel(index)">{{item}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:["首页","番剧","直播","游戏","会员购","产品名称","产品借鉴","关于我们"],
|
||||
FColor:"#fff",
|
||||
courseindex:-1,
|
||||
isActive:true
|
||||
},
|
||||
methods: {
|
||||
li(){
|
||||
return {color:this.FColor}
|
||||
},
|
||||
Clickme(index){
|
||||
this.courseindex=index
|
||||
|
||||
},
|
||||
ChangeModel(index){
|
||||
if(index==this.courseindex){
|
||||
return {active:this.isActive}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
// 案例：取出小于50的数每个数乘以平方进行求平均值
|
||||
list=[]
|
||||
let count=0
|
||||
for(let i=0;i<100;i++){
|
||||
let maths=Math.ceil(Math.random()*10+1)
|
||||
list.push(maths)
|
||||
}
|
||||
let result=list.filter(function(n){
|
||||
return n<100//条件
|
||||
}).map(function(n){
|
||||
count=count+1
|
||||
return n/2 ;;//运算
|
||||
|
||||
}).reduce(function(pre,n){
|
||||
return pre+n//汇总
|
||||
},0)
|
||||
console.log(result);
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
}
|
||||
li{
|
||||
display: inline-block;
|
||||
margin: 25px 1%;
|
||||
width: 100px;
|
||||
line-height: 50px;
|
||||
background-color: aqua;
|
||||
border-radius: 5px;
|
||||
font-size: 22px;
|
||||
padding: 5px;
|
||||
}
|
||||
.active{
|
||||
color: purple;
|
||||
background-color: azure;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="item,value in list" :class="ChangeLi(value)" @click="ChangeModel(value)" >{{item}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:['首页',"工厂介绍","工厂实力","产品中心","新闻中心","联系方式"],
|
||||
thisIndex:-1
|
||||
},
|
||||
methods: {
|
||||
ChangeModel(index) {
|
||||
this.thisIndex = index
|
||||
},
|
||||
ChangeLi(index){
|
||||
if (this.thisIndex == index) {
|
||||
return { active: true }
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
margin: 20px auto;
|
||||
border-collapse: collapse;
|
||||
/*将单元格之间的空隙删除掉*/
|
||||
|
||||
}
|
||||
|
||||
tr,
|
||||
td {
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: rgb(247, 246, 247);
|
||||
}
|
||||
|
||||
.btn,
|
||||
.bookname {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
border: 1px solid greenyellow;
|
||||
color: #fff;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.counts>button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: gray;
|
||||
border: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>购物清单</title>
|
||||
<link rel="stylesheet" href="../css/css.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- tr 为行，td 为列 -->
|
||||
<div id="app">
|
||||
<div v-if="list.length">
|
||||
<h2>教材购物清单</h2>
|
||||
<table>
|
||||
<!-- 表头区域 -->
|
||||
<tr class="header">
|
||||
<td>教材编号</td>
|
||||
<td>教材名称</td>
|
||||
<td>教材出版日期</td>
|
||||
<td>教材价格</td>
|
||||
<td>数量</td>
|
||||
<td>操作</td>
|
||||
</tr>
|
||||
<!-- 表格内容区域 -->
|
||||
<tr v-for="item,index in list">
|
||||
<td>{{item.bid}}</td>
|
||||
<td class="bookname">{{item.bna}}</td>
|
||||
<td>{{item.dates}}</td>
|
||||
<td>{{item.price|PriceFilters}}</td>
|
||||
<td class="counts">
|
||||
<button @click="addBc(index,$event)" >+</button>
|
||||
{{item.couts}}
|
||||
<button @click="delBc(index,$event)" >-</button>
|
||||
</td>
|
||||
<td class="btn">
|
||||
<button @click="RemoveItem(index)">移除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>总价钱:{{TotalPrice()|PriceFilters}}</h2>
|
||||
</div>
|
||||
<h2 v-else>你的购物清单已为空</h2>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../js/vue.min.js"></script>
|
||||
<script src="../js/index.js"></script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
list: [
|
||||
{ bid: 2024, bna: "《数据结构与算法》", dates: "2018-7", price: 76.50, couts: 0 },
|
||||
{ bid: 2671, bna: "《计算机原理与应用》", dates: "2018-9", price: 88.00, couts: 0 },
|
||||
{ bid: 7012, bna: "《离散数学》", dates: "2019-10", price: 66.00, couts: 0 },
|
||||
{ bid: 1677, bna: "《马克思原理》", dates: "2018-5", price: 99.00, couts: 0 },
|
||||
{ bid: 1711, bna: "《线性代数》", dates: "2019-6", price: 88.00, couts: 0 },
|
||||
{ bid: 1651, bna: "《高等数学（同济版）》", dates: "2016-6", price: 89.00, couts: 0 },
|
||||
{ bid: 4131, bna: "《计算机应用基础》", dates: "2021-9", price: 85.50, couts: 0 },
|
||||
{ bid: 4325, bna: "《JavaSE基础应用》", dates: "2022-1", price: 64.00, couts: 0 },
|
||||
{ bid: 4775, bna: "《Web开发与应用》", dates: "2021-12", price: 99.00, couts: 0 },
|
||||
{ bid: 4671, bna: "《Pyhton开发与应用》", dates: "2021-11", price: 88.00, couts: 0 },
|
||||
{ bid: 4672, bna: "《移动应用与开发》", dates: "2022-1", price: 61.00, couts: 0 },
|
||||
{ bid: 5133, bna: "《云计算概论》", dates: "2021-2", price: 54.00, couts: 0 },
|
||||
],
|
||||
CountIndex: -1,
|
||||
},
|
||||
filters: {
|
||||
PriceFilters(val) {
|
||||
return "￥" + val.toFixed(2)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 计算总价钱
|
||||
TotalPrice() {
|
||||
let sum = 0
|
||||
for (let book of this.list) {
|
||||
sum += book.price * book.couts
|
||||
}
|
||||
return sum
|
||||
},
|
||||
//增加数量
|
||||
addBc(index, event) {
|
||||
this.list[index].couts += 1
|
||||
},
|
||||
//减少数量
|
||||
delBc(index, event) {
|
||||
if (this.list[index].couts > 0) {
|
||||
this.list[index].couts -= 1
|
||||
}
|
||||
},
|
||||
//减少项目
|
||||
RemoveItem(index) {
|
||||
this.list.splice(index, 1)
|
||||
},
|
||||
},
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table{
|
||||
margin: 0 auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
tr,td{
|
||||
border: 1px solid #000;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.table_title{
|
||||
background-color: rgba(247, 246, 247);
|
||||
}
|
||||
.price{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
}
|
||||
.pr_Btn{
|
||||
width: 30px;
|
||||
background-color: rgb(252,254,254);
|
||||
border: 1px solid rgb(246,246,246);
|
||||
border-radius: 5px;
|
||||
}
|
||||
button{
|
||||
width: 50px;
|
||||
}
|
||||
/*
|
||||
规范用名
|
||||
数组对象---books
|
||||
for使用对象---bok
|
||||
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="books.length">
|
||||
<table>
|
||||
<!-- 表头 -->
|
||||
<tr class="table_title">
|
||||
<td class="first"></td>
|
||||
<td style="width:200px">书籍名称</td>
|
||||
<td>出版日期</td>
|
||||
<td style="text-align:left">价格</td>
|
||||
<td style="width:150px">购买数量</td>
|
||||
<td>操作</td>
|
||||
</tr>
|
||||
<!-- 表格内容 -->
|
||||
<tr v-for="bok,index in books">
|
||||
<td>{{bok.bid}}</td><!-- 图书序号 -->
|
||||
<td>{{bok.bname}}</td><!-- 书籍名称 -->
|
||||
<td>{{bok.datas}}</td><!-- 价格 -->
|
||||
<td>{{bok.price|Filterprice(bok.price)}}</td><!-- 购买价格 -->
|
||||
<td><!-- 购买数量 -->
|
||||
<button class="pr_Btn" @click="isAddBtn(index)">+</button>
|
||||
<div class="price">{{bok.count}}</div>
|
||||
<button class="pr_Btn" @click="isRemovedBtn(index)" :style="">-</button>
|
||||
</td>
|
||||
<td>
|
||||
<button @click="isRemove(index)">移除</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>总价格为：{{TotalPrice}}</h2>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h2>购物车已被清空</h2>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script src="../JavaScript/Shop_list.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.active{
|
||||
color: antiquewhite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" :class="isChangeColor()" @click="btn()">
|
||||
<div>{{hello}}</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
constvue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
hello:"早上好",
|
||||
isActive:true,
|
||||
},
|
||||
methods: {
|
||||
isChangeColor(){
|
||||
return {active:this.isActive}
|
||||
},
|
||||
btn(){
|
||||
this.isActive=!this.isActive
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
li{
|
||||
display: inline-block;
|
||||
margin: 10px 15px;
|
||||
width: 100px;
|
||||
line-height: 50px;
|
||||
border-radius: 10px;
|
||||
background-color: blanchedalmond;
|
||||
font-size: 18px;
|
||||
}
|
||||
.active{
|
||||
background-color: coral;
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<ul>
|
||||
<li v-for="item,index in content" :class="isActive(index)" @mousemove="MouseClickIn(index)">{{item}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../js/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
content:['首页','公司简介','公司运营','公司财务','员工系统','关于我们'],
|
||||
item_index:-1
|
||||
},
|
||||
methods: {
|
||||
isActive(index){
|
||||
if(this.item_index==index){
|
||||
return {active:true}
|
||||
}
|
||||
},
|
||||
MouseClickIn(index){
|
||||
this.item_index=index
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,34 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 5px;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li,
|
||||
.ShowInPic {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ShowInPic {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
margin: 15px auto;
|
||||
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 1px solid #f00;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>图片切换</title>
|
||||
<link rel="stylesheet" href="../css/css.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="ShowInPic" :style="PicChange()">
|
||||
<!-- 放大图 -->
|
||||
</div>
|
||||
<!-- 五张小图 -->
|
||||
<ul>
|
||||
<li v-for="item,index in list" :style="ChangeImages(index)" @click="ChangePic(index)" :class="isActive(index)"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../js/vue.min.js"></script>
|
||||
<script src="../js/index.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
list: [
|
||||
'url(../img/img1.jpg)', 'url(../img/img2.jpg)',
|
||||
'url(../img/img3.jpg)', 'url(../img/img4.jpg)',
|
||||
],
|
||||
this_index: 0,
|
||||
},
|
||||
methods: {
|
||||
ChangeImages(index) {
|
||||
return { backgroundImage: `url(../img/img${index + 1}.jpg)` }
|
||||
},
|
||||
ChangePic(index) {
|
||||
this.this_index = index
|
||||
},
|
||||
PicChange() {
|
||||
return { backgroundImage: `url(../img/img${this.this_index + 1}.jpg)` }
|
||||
},
|
||||
isActive(index) {
|
||||
if (this.this_index == index) {
|
||||
return { active: true }
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 这是select 单选情况下 -->
|
||||
<select name="" id="" v-model="fruit">
|
||||
<option value="葡萄">葡萄</option>
|
||||
<option value="香蕉">香蕉</option>
|
||||
<option value="苹果">苹果</option>
|
||||
<option value="梨子">梨子</option>
|
||||
</select>
|
||||
<h2>你所选择的水果是{{fruit}}</h2>
|
||||
<!-- 这是select 多选情况下 -->
|
||||
<!-- multiple主要是用于在select语句下 输入多个内容 -->
|
||||
<select name="" id="" v-model="Fruit" multiple>
|
||||
<option value="葡萄">葡萄</option>
|
||||
<option value="香蕉">香蕉</option>
|
||||
<option value="苹果">苹果</option>
|
||||
<option value="梨子">梨子</option>
|
||||
</select>
|
||||
<h2>你所选择的水果是{{Fruit}}</h2>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
fruit:"",
|
||||
Fruit:[]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!-- 1、不需要实时输入只需要回车时传递即可 -->
|
||||
<input type="text" v-model.lazy="model">
|
||||
<br>
|
||||
<!-- 2、将v-model所传递的字符串转化成数值型 -->
|
||||
<input type="text" v-model.number="num" @keyup="isNumbers(num)">
|
||||
<div>
|
||||
你所输入的{{num}}内容是{{isNumber}}类型
|
||||
</div>
|
||||
<div>
|
||||
你输入的内容是{{model}},
|
||||
</div>
|
||||
<!-- 3、将输入文本中的左右两边空格去除掉 -->
|
||||
<input type="text" v-model.trim="text">
|
||||
你输入的文本内容是{{text}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
model:"",
|
||||
num:0,
|
||||
isNumber:"",
|
||||
text:""
|
||||
},
|
||||
methods: {
|
||||
isNumbers(val) {
|
||||
if(typeof(val)=="string"){
|
||||
this.isNumber="字符"
|
||||
}else{
|
||||
this.isNumber="数值"
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<label for="" v-for="item in list">
|
||||
<input type="checkbox" :name="item" v-model="model" :value="item" >{{item}}
|
||||
</label>
|
||||
<br>
|
||||
<label for="" v-for="item in model">
|
||||
<input type="checkbox" :name="item" v-model="model" :value="item">{{item}}
|
||||
</label>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:['苹果','香蕉','栗子','李子','水蜜桃','甘蔗'],
|
||||
model:[]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-for="item,index in fruit" style="display:inline-block;">
|
||||
<input type="checkbox" :value="item" v-model="Chick_Fruit">{{item}}
|
||||
</div>
|
||||
你选择的水果有：<br>
|
||||
<div v-for="fruits in Chick_Fruit">{{fruits}}</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
fruit:['苹果','香蕉','梨子','葡萄','桃子','山竹'],
|
||||
Chick_Fruit:[]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<input type="text" name="" id="" v-model="message">
|
||||
<br> data中的数据：{{message}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
message:"你好呀"
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
computed:{
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<input type="radio" value="男" v-model="sex">男
|
||||
<input type="radio" value="女" v-model="sex">女
|
||||
<br> data中sex的数据：{{sex}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
message: "你好呀",
|
||||
sex:"男"
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<label for="">
|
||||
<input type="checkbox" v-model="Chicked">同意此协议
|
||||
</label>
|
||||
<div>Chicked属性选择的是：{{Chicked}}</div>
|
||||
<button :disabled="!Chicked">下一步</button>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
Chicked:false
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<input type="text" name="" id="" :value="message" @input="ChangeMessage($event)">
|
||||
<br> data中的数据:{{message}}
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
message: "你好呀"
|
||||
},
|
||||
methods: {
|
||||
ChangeMessage(event){
|
||||
this.message=event.target.value
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<select v-model="Selection">
|
||||
<option v-for="item in Chicked">{{item}}</option>
|
||||
{{Selection}}
|
||||
</select>
|
||||
<label for="">
|
||||
<input type="checkbox" value="云计算概论" v-model="Chicked">云计算概论
|
||||
<input type="checkbox" value="HTML入门初始" v-model="Chicked">HTML入门初始
|
||||
{{Chicked}}
|
||||
</label>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
Chicked:[],
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
|
||||
}
|
||||
li{
|
||||
margin: 0 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<label for="">
|
||||
<input type="checkbox" value="basketball" v-model="ball">篮球
|
||||
<input type="checkbox" value="football" v-model="ball">足球
|
||||
<input type="checkbox" value="table tennis" v-model="ball">乒乓球
|
||||
<ul>
|
||||
<li v-for="balls in ball">{{balls}}</li>
|
||||
</ul>
|
||||
<input type="checkbox" v-model="agree">同意此协议
|
||||
</label>
|
||||
<button :disabled="!agree">下一步</button>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
agree:false,
|
||||
ball:[]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!--
|
||||
多选框中单选只能表示true或false，
|
||||
多选框中多选如下
|
||||
-->
|
||||
<div>
|
||||
<label for="">
|
||||
水果：
|
||||
<input type="checkbox" value="apple" v-model="fruit">苹果
|
||||
<input type="checkbox" value="plum" v-model="fruit">李子
|
||||
<input type="checkbox" value="pear" v-model="fruit">梨子
|
||||
</label>
|
||||
你选择的水果有{{fruit}}
|
||||
</div>
|
||||
<!--
|
||||
组合框使用multiple实现多选
|
||||
-->
|
||||
<div>
|
||||
<select name="" id="" v-model="type" multiple>请选择类别
|
||||
<option value="文科">文科</option>
|
||||
<option value="理科">理科</option>
|
||||
<option value="工科">工科</option>
|
||||
</select>
|
||||
你选择的类别有{{type}}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
fruit:[],
|
||||
type:[]
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.btn{
|
||||
display: flex;
|
||||
}
|
||||
button{
|
||||
margin: 0 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<form action="../05-v-on属性的使用/v-on参数传递问题.html" name="Frm">
|
||||
<div v-if="isChange">
|
||||
用户名：<input type="text" name="user" v-model="user">
|
||||
<div>
|
||||
密码：<input type="password" name="pwd" v-model="user_pwd" key="user_pwd">
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
用户邮箱：<input type="text" name="email" v-model="email">
|
||||
<div>
|
||||
密码：<input type="password" name="pwd" v-model="email_key" key="email_key">
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox" v-model="agree">是否同意此协议
|
||||
<div class="btn">
|
||||
<button @click.prevent="Put_Submit(user)" :disabled=!agree>提交</button>
|
||||
<button @click.prevent="Change()">切换</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
isChange:true,
|
||||
user:"",
|
||||
user_pwd:"",
|
||||
email_key:"",
|
||||
email:"",
|
||||
agree:false
|
||||
},
|
||||
methods: {
|
||||
Change(){
|
||||
this.isChange=!this.isChange
|
||||
this.user_pwd=""
|
||||
this.email_key=""
|
||||
},
|
||||
Put_Submit(user){
|
||||
|
||||
if(user.length<4 ){
|
||||
alert("你的用户名太短，请重新输入")
|
||||
this.user=""
|
||||
|
||||
}
|
||||
else{
|
||||
if (this.email==""){
|
||||
this.email==null
|
||||
}
|
||||
info = `你的用户是${this.user},\n你的邮箱是${this.email}`
|
||||
alert(info)
|
||||
this.user=""
|
||||
this.user_pwd=""
|
||||
this.email=""
|
||||
this.email_key=""
|
||||
}
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
margin: 20px auto;
|
||||
}
|
||||
tr,td{
|
||||
border: 1px solid black;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
.active{
|
||||
background-color:bisque;
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
margin: 0 auto;
|
||||
}
|
||||
.Chicked{
|
||||
text-align: center;
|
||||
}
|
||||
button{
|
||||
width: 100px;
|
||||
line-height: 50px;
|
||||
border: 1px solid rgb(218, 209, 209);
|
||||
border-radius: 10px;
|
||||
font-size: 22px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
button:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<table>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>姓名</td>
|
||||
<td>性别</td>
|
||||
<td>年级</td>
|
||||
<td>班级</td>
|
||||
<td>备注</td>
|
||||
</tr>
|
||||
<tr v-for="item,index in list" :class="ChangeColors(index)" @click="ChangeColor(index)">
|
||||
<td>{{item.id}}</td>
|
||||
<td>{{item.name}}</td>
|
||||
<td >
|
||||
{{Sex_index[index]}}
|
||||
</td>
|
||||
<td>{{item.grade}}</td>
|
||||
<td>{{item.class}}</td>
|
||||
<td>{{item.text}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="Chicked">
|
||||
<label for="">
|
||||
<input type="checkbox" v-model="agree">
|
||||
请仔细阅读协议后进入下一步
|
||||
</label>
|
||||
<br>
|
||||
<button :disabled="!agree">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
list:[
|
||||
{ id: 1, name: "陈晓", sex: 0, grade: 20, class: 5, text: "" },
|
||||
{ id: 2, name: "张三", sex: 1, grade: 21, class: 5, text: "" },
|
||||
{ id: 3, name: "李四", sex: 1, grade: 19, class: 1, text: "" },
|
||||
{ id: 4, name: "王五", sex: 1, grade: 20, class: 2, text: "" },
|
||||
{ id: 5, name: "潇潇", sex: 0, grade: 22, class: 3, text: "" },
|
||||
],
|
||||
isActive:false,
|
||||
this_index:-1,
|
||||
Sex_index:"",
|
||||
agree:false,
|
||||
},
|
||||
methods: {
|
||||
ChangeColor(index){
|
||||
this.this_index=index
|
||||
},
|
||||
ChangeColors(index){
|
||||
if(this.this_index==index){
|
||||
if(this.list[index].sex==0){
|
||||
this.Sex_index="女"
|
||||
}else{
|
||||
this.Sex_index="男"
|
||||
}
|
||||
return {active:true}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<form action="https://www.baidu.com/s" name="frm">
|
||||
<input type="text" placeholder="请回车后进入查询窗口" name="num" @keypress.enter.prevent="KeyDownThings" v-if="ChangeIf" key="num">
|
||||
<input type="text" placeholder="请输入你想要查询的数据" name="wd" @keypress.enter.prevent="Submit()" v-else key="passwd">
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../JavaScript/vue.min.js"></script>
|
||||
<script>
|
||||
const vue=new Vue({
|
||||
el:"#app",
|
||||
data:{
|
||||
ChangeIf:true
|
||||
},
|
||||
methods: {
|
||||
KeyDownThings(){
|
||||
this.ChangeIf=false
|
||||
|
||||
},
|
||||
Submit(){
|
||||
frm.submit()
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<cpn></cpn>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../js/vue.min.js"></script>
|
||||
<script src="../js/index.js"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
测试文本
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
const create = Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<h1>这是一个标签</h1>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
const cpn = Vue.component(
|
||||
'cpn', create
|
||||
)
|
||||
const vue = new Vue({
|
||||
el: "#app",
|
||||
})
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,41 @@
|
|||
const vue = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
books: [
|
||||
{ bid: 1, bname: "《算法导论》", datas: "2006-9", price: 85.00, count: 0 },
|
||||
{ bid: 2, bname: "《UNIX编程艺术》", datas: "2006-2", price: 59.00, count: 0 },
|
||||
{ bid: 3, bname: "《编程珠玑》", datas: "2008-10", price: 39.00, count: 0 },
|
||||
{ bid: 4, bname: "《代码大全》", datas: "2006-3", price: 128.00, count: 0 }
|
||||
],
|
||||
},
|
||||
methods: {
|
||||
isAddBtn(index){
|
||||
this.books[index].count+=1
|
||||
},
|
||||
isRemovedBtn(index){
|
||||
this.books[index].count-=1
|
||||
},
|
||||
isRemove(index){
|
||||
this.books.splice(index,1)
|
||||
}
|
||||
},
|
||||
filters:{
|
||||
Filterprice(val){
|
||||
return "￥" + val.toFixed(2)
|
||||
}
|
||||
},
|
||||
// filter过滤
|
||||
//map 映射（数据操作）
|
||||
//reduce 汇总
|
||||
computed:{
|
||||
TotalPrice(){
|
||||
let sum=0
|
||||
for(let i=0;i<this.books.length;i++){
|
||||
if (this.books[i].count != 0 && this.books[i].count>=0){
|
||||
sum+=this.books[i].price*this.books[i].count
|
||||
}
|
||||
}
|
||||
return sum
|
||||
}
|
||||
}
|
||||
})
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue