vue基础——数据绑定指令

数据绑定指令

v-text : 效果与插值表达式相同，如以下例子： <div id="app"> <span >{{message}}</span> <br /> <span v-text="message"></span> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ message: "hello world", } }) </script>

得到的结果都是hello world;

v-html：把带有标签的内容解析,但是存在安全问题,推荐内部数据使用，外部数据容易被攻击； <div id="app"> <div v-html="msg"></div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:"<h1>一级标题</h1>" } }) </script>

3.v-pre : 显示原始信息

<div id="app"> <div v-pre>{{msg}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:"<h1>一级标题</h1>" } }) </script>

运行结果如下