v-text v-html v-on v-show v-if v-bind v-for v-model
v-text
v-html
v-on
v-show
v-if
v-bind
v-for
v-model
js代码
<script> var app = new Vue({ el:"#app", data:{ message:"<b>加粗字体<b>", arr:[0,1,2,3] }, methods:{ fun:function(){ alert(1); } } }) </script>
<div id="app"> <span v-text="message"><span> </div>
<div id="app"> <span v-html="message"><span> </div>
v-text v-html 的区别在于v-html 指令可以解析出标签，而v-text 不能解析标签，会原封不动的将<b>加粗字体</b>打印出来。
<div id="app"> <span v-on:click="fun">点击<span> <span @:click="fun">点击<span> </div>
<div id="app"> <span v-show="true">内容<span> </div>
<div id="app"> <span v-if="true">内容<span> </div>
v-show v-if 的区别在于 v-show 指令只是利用display样式对元素显示隐藏，而 v-if 是在DOM树内添加或者删除元素
<div id="app"> <a v-bind:src="/路径">a标签</a> <a :src="/路径">a标签</a> </div>
<div id="app"> <span v-for="a in arr">{{a}}<span> </div>
<div id="app"> <input v-model="message" /> </div>
本文链接：https://heri.ganto.cn/2020/02/10/vue%E4%B8%AD%E7%9A%84%E5%B8%B8%E7%94%A8%E6%8C%87%E4%BB%A4/
本文更新于：2020-09-26 07:58:46
小站声明：如果你需要“转载”、“引用”小站的文章，可以不需要作者同意，请务必标明出处和文章链接。