vue绑定属性的方法:1、class绑定,代码为【
item ---- 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中文网其他相关文章!