Vue基础指令(v-html,v-model)
上篇：插值双大括号和v-text指令的区别：
v-text是指令，只能绑定在DOM标签上，{{}}绑定 可以放置在vue挂载目标节点内的任意位置， 而不需要额外得分DOM标签。
2.插入标签表达式：
v-html=”变量名”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-html</title>
<script src="vue.js"></script>
</head>
<body>
<!--
2.插入标签表达式
v-html=”变量名”
-->
<div id="app">
<p v-html="html"></p>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
html:'<h1 style="color: red;">插入Html标签</h1>'
}
})
</script>
</html>
效果：
3.数据的双向绑定表达式:
v-model=“变量名”
注意：一般用于：input ，select，textarea
<body>
<!--
2.插入标签表达式
v-html=”变量名”
3.数据的双向绑定表达式：
v-model=”变量名“
-->
<div id="app">
<p v-html="html"></p>
<!--msg既能为input赋值，又能，如果input值发生改变，msg的值也跟随着改变-->
<input type="text" style="width: 200px;" v-model="msg" />
<!--显示msg的值，观察变化情况-->
<p v-text="msg"></p>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
html:'<h1 style="color: red;">插入Html标签</h1>' ,
msg:"你好，我是v-model数据双向绑定"
}
})
</script>
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
