65 lines
1.5 KiB
HTML
65 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header" v-cloak>
|
|
<p>{{ sb }}</p>
|
|
<ul v-once>
|
|
<li v-for="(item,index) in list">{{ index }} {{ item.name }}</li>
|
|
</ul>
|
|
<ul>
|
|
<li v-for="(v,a) in cva">{{ a }} {{ v }}</li>
|
|
</ul>
|
|
<img v-bind:src="img" alt="">
|
|
<p v-if= "isLogin" >deli</p>
|
|
<p v-else>asdfvb</p>
|
|
<h2 v-show="isShow">v-show</h2>
|
|
<div v-text="content"></div>
|
|
<input type="text" v-model="userName" placeholder="请输入号码">
|
|
{{userName}}
|
|
<button @click="test">登录</button>
|
|
</div>
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
<script>
|
|
new Vue({
|
|
el: '.header',
|
|
data:{
|
|
sb: '你是个啥',
|
|
list: [
|
|
{id:1,name:'123'},
|
|
{id:2,name:'123345'},
|
|
{id:3,name:'1234353543'},
|
|
{id:4,name:'1235438373873'},
|
|
],
|
|
cva:{
|
|
id:5,
|
|
name:5646
|
|
},
|
|
img:'https://www.baidu.com/img/dong_47f08bb2dd6546c9a788f71d7463ce48.gif',
|
|
isLogin:false,
|
|
isShow: true,
|
|
content: '<h2>这是测试标题</h2>',
|
|
userName: '张三',
|
|
},
|
|
methods:{
|
|
test() {
|
|
this.test2();
|
|
},
|
|
test2(){
|
|
alert(this.userName)
|
|
}
|
|
}
|
|
|
|
})
|
|
</script>
|
|
</html> |