bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
历届学生/吴欣阳/项目开发/练习项目/课程练习/7.16/vue测试/page/index.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="app">
<ul>
<li v-for="(v,i) in newsList"
>{{i}} :{{v.title}}</li>
</ul>
<div class="show"v-show="isShow">展示show</div>
<div v-if=" vipLevel==1">VIP1</div><!--如果VIP等级为1显示这个div否则显示下面的div（可以继续判断）-->
<div v-else>VIP2</div>
<input type="text" placeholder="请输入用户名"v-model="username">
{{username}}
<button @click="hello(123456)">点击</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:".app",
data:{
test: '这是vue',
url:'https://www.baidu.com/',
newsList: [
{ title: '新闻1',id:1},
{ title: '新闻2',id:2},
{ title: '新闻3',id:3},
{ title: '新闻4',id:4},
{ title: '新闻5',id:5},
],
isShow:true,
vipLevel:1,
username:''
},
methods:{
hello(a){
console.log(a)
console.log(this.username)
}
}
})
</script>
</html>

90
历届学生/吴欣阳/项目开发/练习项目/课程练习/7.16/vue测试/page/tabs.html Normal file
View File

@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,ul,li {
margin: 0;
padding: 0;
}
.tabs {
width: 300px;
margin: 10% auto;
}
.title {
display: flex;
align-items: center;
height: 45px;
justify-content: space-between;
}
.title .active {
color: red;
}
.tabs_content .c_item {
display: none;
}
.tabs_content .active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<div class="tabs">
<div class="title">
<div class="tabs_title" v-for="(v,i) in tab" :class="i==currentIndex?'active':'' " @click="chante(i)">{{v.title}}</div>
</div>
<div class="tabs-content">
<div class="c_item" :class=" i==0? 'active':'' " v-for="(v,i) in tab">
<p v-for="item in v.content">{{item.content}}</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: ".app",
data:{
currentIndex: 0,
tab: [
{
title: '社会',
content: [
{content: '社会的内容1'},
{content: '社会的内容2'},
{content: '社会的内容3'},
]
},
{
title: '军事',
content: [
{content: '军事的内容1'},
{content: '军事的内容2'},
{content: '军事的内容3'},
]
},
{
title: '财经',
content: [
{content: '财经的内容1'},
{content: '财经的内容2'},
{content: '财经的内容3'},
]
}
]
},
methods: {
chante(i){
this.currentIndex=i
console.log(i)
}
}
})
</script>
</html>