item ---- key】;2、style綁定,代碼為【
item ---- key】;2、style綁定,代碼為【vue綁定屬性的方法:1、class綁定,代碼為【6d2cade3083dc4800fc39e76f2ad81e5item ---- key】;2、style綁定,代碼為【
##本教學操作環境: windows10系統、vue2.9,本文適用於所有品牌的電腦。【相關文章推薦:vue.js】
vue綁定屬性的方法:
1、屬性綁定(2種方式)<!-- 绑定属性 --> <div v-bind:title="title">鼠标hover</div> <div :title="title">鼠标悬浮</div> <!-- 绑定地址 --> <img v-bind:src="url" height="400" width="600"/> <!-- html页面渲染 --> <!-- 直接数据绑定 --> <div>{{html}}</div> <!-- 绑定html属性解析 --> <div v-html="html"></div> #js代码 <script> export default { name: 'app', data() { return { msg: 'vue demo', title: '这里是一个title', url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561705454&di=33c13bd9a15f514bae71aaf8250ff305&imgtype=jpg&er=1&src=http%3A%2F%2Fp3.ssl.qhimg.com%2Ft017c9d8f1ba39d313f.jpg', html:'<h3>我是HTML文本</h3>' } } } </script>2、資料綁定的另一種<!-- text数据绑定 --> <div v-text="msg"></div>3、class綁定#html <div> <h3>div颜色列表</h3> <ul> <!-- 简单绑定class --> <li v-bind:class="'red'"> item ---- key </li> <br/> <!-- 列表绑定 --> <li v-for="(item,key) in list" :class="{'red':key ==0,'blue':key==1,'green':key==2,'pink':key==3}"> {{item}} ---- {{key}} </li> </ul> </div> #js代码 export default { name: 'app', data() { return { list: ['红色', '蓝色', '绿色', '粉色'], } } }4、style綁定<!-- style绑定 --> <div class="box" v-bind:style="{height:heightMax+'px',width:widthMax+'px'}">这里是一个div盒子</div> #js代码 export default { name: 'app', data() { return { widthMax: 400, heightMax: 200, } } }相關免費學習推薦:JavaScript(影片)
以上是vue.怎麼綁定屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!
陳述:本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn