一、輸出動態(tài)標簽
請只對可信內(nèi)容使用HTML插值，絕不要對用戶提供的內(nèi)容使用插值，容易導致xss攻擊。

<div id="J_app"><div v-html="rawHtml"></div> </div> var vapp = new Vue({el: '#J_app',data: {rawHtml:'<p>輸出標簽和內(nèi)容</p>'} })

二、輸出動態(tài)文本內(nèi)容

<div id="J_app"> {{ info }} </div> var vapp = new Vue({el: '#J_app',data: {info: 'Hello Vue!'} })

三、輸出標簽的id屬性動態(tài)值

<div id="J_app"><span v-bind:id="dynamicId">這個標簽的id是動態(tài)的</span><span :id="dynamicId">v-bind縮寫，這個標簽的id是動態(tài)的</span> </div> var vapp = new Vue({el: '#J_app',data: {dynamicId: 'J_tab'} })

四、輸出標簽的title屬性動態(tài)值

<div id="J_app"><span v-bind:title="labelTitle">鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！</span><span :title="labelTitle">v-bind縮寫，鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！</span> </div> var vapp = new Vue({el: '#J_app',data: {labelTitle: '頁面加載于 ' + new Date().toLocaleString()} })

五、輸出標簽的class屬性動態(tài)值

1、對象寫法

<div id="J_app"><div class="initCls" v-bind:class="{ cls1: isCur, 'cls-2': hasError }">對象寫法</div> </div> var vapp = new Vue({el: '#J_app',data: {isCur: true,hasError: false} }) <div id="J_app"><div v-bind:class="classObject">對象寫法</div> </div> var vapp = new Vue({el: '#J_app',data: {classObject: {cls1: true,'cls-2': false}} }) <div id="J_app"><div v-bind:class="classObject">對象寫法</div> </div> var vapp = new Vue({el: '#J_app',data: {isCur: true,hasError: false},computed: {classObject: function () {return {cls1: this.isCur && !this.hasError,'cls-2': this.hasError}}} })

2、數(shù)組寫法

<div id="J_app"><div v-bind:class="[classone, classtwo]">數(shù)組寫法</div> </div> var vapp = new Vue({el: '#J_app',data: {classone: 'cls1',classtwo: 'cls-2'} }) <div id="J_app"><div v-bind:class="[isCur ? classone : '', classtwo]">數(shù)組寫法，三目運算符</div> </div> var vapp = new Vue({el: '#J_app',data: {isCur: true,classone: 'cls1',classtwo: 'cls-2'} }) <div id="J_app"><div v-bind:class="[{ cls1: isCur }, classtwo]">數(shù)組寫法，內(nèi)嵌對象</div> </div> var vapp = new Vue({el: '#J_app',data: {isCur: true,classtwo: 'cls-2'} })

六、輸出標簽的style屬性動態(tài)值

<div id="J_app"><div v-bind:style="{ color: activeColor, fontSize: fontNum + 'px' }">style屬性</div> </div> var vapp = new Vue({el: '#J_app',data: {activeColor: 'red',fontNum: 30} }) <div id="J_app"><div v-bind:style="styleObject">style屬性</div> </div> var vapp = new Vue({el: '#J_app',data: {styleObject: {color: 'red',fontSize: '30px'}} })

?

轉(zhuǎn)載于:https://www.cnblogs.com/camille666/p/vue_dom_base_using.html

總結(jié)

以上是生活随笔為你收集整理的vue中的dom基本渲染的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。