一、输出动态标签
请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值,容易导致xss攻击。
<div id="J_app"> <div v-html="rawHtml"></div> </div> var vapp = new Vue({ el: '#J_app', data: { rawHtml:'<p>输出标签和内容</p>' } })
二、输出动态文本内容
<div id="J_app"> {{ info }} </div> var vapp = new Vue({ el: '#J_app', data: { info: 'Hello Vue!' } })
三、输出标签的id属性动态值
<div id="J_app"> <span v-bind:id="dynamicId">这个标签的id是动态的</span> <span :id="dynamicId">v-bind缩写,这个标签的id是动态的</span> </div> var vapp = new Vue({ el: '#J_app', data: { dynamicId: 'J_tab' } })
四、输出标签的title属性动态值
<div id="J_app"> <span v-bind:title="labelTitle"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> <span :title="labelTitle"> v-bind缩写,鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> var vapp = new Vue({ el: '#J_app', data: { labelTitle: '页面加载于 ' + new Date().toLocaleString() } })
五、输出标签的class属性动态值
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、数组写法
<div id="J_app"> <div v-bind:class="[classone, classtwo]">数组写法</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]">数组写法,三目运算符</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]">数组写法,内嵌对象</div> </div> var vapp = new Vue({ el: '#J_app', data: { isCur: true, classtwo: 'cls-2' } })
六、输出标签的style属性动态值
<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' } } })