66 lines
1.8 KiB
HTML
66 lines
1.8 KiB
HTML
<!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>
|
|
[v-clock]{
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app" v-clock>
|
|
<h2>{{text}}</h2>
|
|
<div v-html = "aaa"></div>
|
|
<ul>
|
|
<li v-for = "v,i in news" :key="i" @click="enterInfo(v)">{{i}}{{v.title}}</li>
|
|
</ul>
|
|
<img v-bind:src="ddd" alt="">
|
|
<div v-show="ccc">show true</div>
|
|
<input type="text" placeholder="请输入用户名" v-model="userName">
|
|
{{userName}}
|
|
<button v-on:click="Userlogin">登录</button>
|
|
<h3 ref="tests">lalalla</h3>
|
|
</div>
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el:('.app'),
|
|
data:{
|
|
|
|
text:'我是无敌帅',
|
|
aaa:`<img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png" alt="">`,
|
|
news: [
|
|
{ id: 1, title: '新闻1' },
|
|
{ id: 2, title: '新闻2' },
|
|
{ id: 3, title: '新闻3' },
|
|
{ id: 4, title: '新闻4' },
|
|
],
|
|
userName:'',
|
|
ccc:false,
|
|
ddd:"https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png"
|
|
},
|
|
creatsd(){
|
|
console.log(this.$refs.tests);
|
|
},
|
|
//存放所以的方法
|
|
methods:{
|
|
Userlogin(){
|
|
console.log("Userlogin",this.userName);
|
|
this.test();
|
|
},
|
|
test(){
|
|
console.log("test");
|
|
},
|
|
enterInfo(v){
|
|
console.log(v);
|
|
}
|
|
}
|
|
|
|
})
|
|
</script>
|
|
</html> |