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

Vue2.0-2-数据绑定三种方式

2017-03-17 20:33 260 查看

一、绑定数据的三种方式

1：普通文本绑定，mustach语法【双大括号】 {{}} 或者使用v-text 绑定【常用】

2：解释HTML标签的绑定：使用v-html绑定【慎用】

2.1 注意：除非是信任的内容使用这样的方式进行数据绑定
2.2 这样的绑定方式，如果内容不是被信任的，有可能会造成XSS攻击

3：将数据绑定到标签的属性上，使用 v-bind:属性名称=”变量” 来绑定【常用】

二、使用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue初探</title>
<script src="../js/lib/vue/vue.js"></script>
</head>
<body>

<div id="app">
{{message}}
<br />
<span v-text="message"></span>
<br />
<span v-html="info"></span>
<br />
<span v-bind:title="msg">穷人折腾失败了，还是穷人，万一成功呢？</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"<p>就是拼才华</p>",
info:"<h2>你说呢，小伙子</h2>",
msg:"就是傲娇"
}
});
</script>
</body>
</html>

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

标签： vue-数据绑定

相关文章推荐

新的分享

章节导航