04 Vue的模板語法- v-text, v-html | vue js content
![04 Vue的模板語法- v-text, v-html](https://i.imgur.com/axBPWDg.jpg)
上篇建立了一個簡單的Vue應用程式,並利用花括號{{}}將data的值綁定至DOM,除此之外也能使用v-text語法:v-text: {{msg}}
我的第一個Vue應用(ง๑•̀_•́)ง
我的第一個Vue應用(ง๑•̀_•́)ง
<...![04 Vue的模板語法- v-text, v-html](http://pix4.agoda.net/hotelimages/agoda-homes/5899847/61e1a790eeb181e40e8f262ea5a396dc.jpg?s=800x)
上篇建立了一個簡單的Vue應用程式,並利用花括號{{}}將data的值綁定至DOM,除此之外也能使用v-text語法:
v-text: <!--html--> <div id="app01"> <p> {{ msg }} </p> <p v-text="msg"></p> </div> <!--js--> <script> new Vue({ el: "#app01", data: { msg: "我的第一個Vue應用(ง๑ •̀_•́)ง", }, }); </script>render效果與{{}}一樣:
<div id="app01"> <p>我的第一個Vue應用(ง๑ •̀_•́)ง</p> <!--{{}}--> <p>我的第一個Vue應用(ง๑ •̀_•́)ง</p> <!--v-text--> </div>但值得注意的是使用v-text要注意,綁定的tag如果還有別的東西,會直接被洗掉,下面的例子示範在綁v-text的tag項下塞一個span我存在 (́◉◞౪◟◉‵):
<!--html--> <div id="app01"> <p v-text="msg"><span>我存在 (́◉◞౪◟◉‵) </span></p> </div> <!--js--> <script> new Vue({ el: "#app02", data: { msg: "你走開( ͡° ͜ʖ ͡°)", }, }); </script>render結果:
<div id="app02"> ...