表单输入绑定
单行文本双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue.min.js"></script>
<body>
<div id="app1">
单行文本绑定<br />
<input v-model.number="msg1" type="text" placeholder="内容"/>
<br />
类型：{{typeof(msg1)}}
<br />
{{msg1}}
</div>
</body>
</html>
<script>
const app=new Vue({
el:"#app1",
data(){
return {
msg1:666
}
}
}
)
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script src="js/vue.min.js"></script>
<body>
<div id="app">
<!-- 顶部导航栏 -->
<div class="head-box">
<!-- lOGO -->
<div class="lOGO">
MI
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<!-- 内容 -->
<div class="main">
<div class="wz-box">
<div >
<img :src="wzimg" alt="" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
li{
list-style-type: none;
}
.head-box{
height: 60px;
box-shadow: 0 5px 6px --5px rgba(133, 133, 133, 6);
display: flex;
align-items: center;
padding: 0 30px;
}
.lOGO{
font-size: 25px;
font-weight: bold;
}
.nav{
display: flex;
}
.nav ul li{
float: left;
margin-left: 30px;
font-size: 18px;
}
</style>
<script>
new Vue ( {
el:"app",
data(){
return{
wzimg:"https://image.so.com/view?q=%E5%9B%BE%E7%89%87&src=tab_www&correct=%E5%9B%BE%E7%89%87&ancestor=list&cmsid=7cf46bcee8c378567433199faf1119d3&cmras=6&cn=0&gn=0&kn=50&crn=0&bxn=20&fsn=130&cuben=0&pornn=0&manun=24&adstar=0&clw=244#id=c93c1dc45f38670f011187594333fc7f&currsn=0&ps=115&pc=115"
}
}
})
</script>
