50 lines
1.2 KiB
HTML
50 lines
1.2 KiB
HTML
<!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> |