vue学习笔记（v-text v-html v-on v-model）-panda vue.js

1 v-text v-html

v-textv-html {{message}}

我们已经会在html中输出data中的值了，我们已经用的是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。
【vue学习笔记（v-text v-html v-on v-model）-panda】需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
2 v-on

v-on 本场比赛得分：{{fenshu}}

我们的v-on 还有一种简单的写法，就是用@代替。
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。

vue学习笔记（v-text v-html v-on v-model）-panda

文章图片

3.v-model的双向绑定

v-model {{message}} 文本框

4.单选多选绑定数据

v-model {{message}} 文本框 v-model v-model.lazy v-model.number v-model.trim 多选框绑定一个值 {{isTrue}} 多选绑定一个数组 JSPang Panda PanPan {{web_Names}} 单选按钮绑定男女 {{sex}}