<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div style="width:600px;border: 1px solid sandybrown;">
<p>
1.</br>
v-text,v-html,{{}}都可以读取data中对应名字的内容。
v-text是按照文本显示的,就算你用了其他标签,也会按照文本来显示
v-html,按照浏览器来显示
</p>
<p>
2.</br>
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: '老师最帅',
cat: {
name: '嘿嘿嘿',
age: '18',
desc: '一只白色的狗',
},
yonghu:{
user: 'admin',
password: 'admin',
},
user1: '',
password1: '',
},
methods: {
check() {
if (this.user1 == this.yonghu.user && this.password1 == this.yonghu.password) {
alert('登录成功');
}
else {
alert('密码或登录名错误');
}
}
}
});
</script>
</body>
</html>
<script src="js/vue.js"></script>
<div id="one">
<p v-color="'red'">{{yanse}}</p>
</div>
<script>
var vm=new Vue({
el:"#one",
data:{
yanse:'test',
},
directives:{
'color':{
bind:function (el,binding) {
el.style.color=binding.value;
}
}
}
})
</script>
14
最新推荐文章于 2024-08-09 10:49:44 发布