Vue2.0-2-数据绑定三种方式
一、绑定数据的三种方式1:普通文本绑定,mustach语法【双大括号】 {{}}或者使用v-text 绑定【常用】2:解释HTML标签的绑定:使用v-html绑定【慎用】2.1 注意:除非是信任的内容使用这样的方式进行数据绑定2.2 这样的绑定方式,如果内容不是被信任的,有可能会造成XSS攻击3:将数据绑定到标签的属性上,使用v-bind:属性名称=
·
一、绑定数据的三种方式
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>
更多推荐
已为社区贡献1条内容
所有评论(0)