您的位置：首页 > 产品设计 > UI/UE

Vue--数据双向绑定

2017-05-27 21:19 351 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<!----
在VUE中，数据双向绑定时，必须在data属性中申明这个变量
{{}}  === v-text 进行文本的数据双向绑定
v-html 进行脚本的数据双向绑定 尽量不要使用，有安全问题--xss攻击问题

v-bind:属性名="属性值"
---->
<div id="app">
{{msg}}
</div>
<hr/>
<div class="one">
<input type="text" v-model="name">
{{name}}
</div>
<hr/>
<div class="box">
<div v-bind:title="'555'">把鼠标放上1</div>
<div v-bind:title="inbox">把鼠标放上2</div>
</div>
<hr/>
<div class="bin">
<input type="text" v-model="username">
<div v-text="username"></div>
<div v-html="msg"></div>
</div>
</body>
<script>
new Vue({
"el":".bin",
"data":{
"username":"我想有个女朋友",
"msg":"<h1>这里不安全</h1>"
}
})
new Vue({
"el":"#app",
"data":{
"msg":"你好我是第一节"
},
});
new Vue({
"el":".one",
"data":{
"name":"小明"
}
});
var app=new Vue({
"el":".box",
"data":{
"name":"小明",
"inbox":"我是第二个"
}
})
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航