<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div style="width:600px;border: 1px solid sandybrown;">
<p>
<h3>第一题</h3>
v-text,v-html,{{}}都可以读取data中对应名字的内容。
v-text是按照文本显示的,就算你用了其他标签,也会按照文本来显示
v-html,按照浏览器来显示
</p>
<p>
<h3>第三题</h3>
MVVM模式
M表示储存对象,VM表示一个中间者,V就是我们的HTML代码
我们要将M中的数据呈现在V中,引入了一个VM对象,V要显示数据,会找VM要,
VM会从M中取到数据给V,如果V要改数据,也是通过调用VM,VM去真正改变M中的数据。
我们初始化V的时候就会去取数据,所以最终的效果就是,V中数据和M中数据始终保持一致。
</p>
</div>
<div id="app">
<div style="width:600px;border: 1px solid darkseagreen;margin-top: 5px;">
<h3>第二题</h3>
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<div style="width:600px;border: 1px solid paleturquoise;margin-top: 5px;">
<h3>第四题</h3>
<p>我叫{{cat.name}},我今年{{cat.age}}了,我是{{cat.desc}}哦</p>
</div>
<div style="width:600px;border: 1px solid cornflowerblue;margin-top: 5px;">
<h3>第五题</h3>
<input type="text" v-model="user1"><br/>
<input type="text" v-model="password1"><br>
<button onclick="" @click="check">登录</button>
</div>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
msg: 'lahbfvlahblvjabvl',
cat: {
name: '罗小黑',
age: '18',
desc: '一只黑色的猫',
},
yonghu:{
user: 'admin',
password: '123',
},
user1: '',
password1: '',
},
methods: {
check() {
if (this.user1 == this.yonghu.user && this.password1 == this.yonghu.password) {
alert('登录成功');
}
else {
alert('登陆失败');
}
}
}
});
</script>
</body>
</html>
3-day04作业
最新推荐文章于 2022-03-30 01:04:51 发布