首页 > 代码库 > [Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
Use v-bind:class and v-bind:style to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using v-bind:style.
<body> <div id="card"> <header>{{ title }}</header> <button v-bind:class="{‘rounded‘: isRounded, ‘large‘: sizeToggle}" v-bind:style="styles" v-bind:disabled="disabled" >Start Tour</button> <hr> <h4>Options</h4> <ul> <li><input type="checkbox" v-model="sizeToggle"><label>Large</label></li> <li><input type="checkbox" id="round" v-model="isRounded"><label for="round">Rounded</label></li> <li><input type="checkbox" v-model="disabled"><label>Disabled</label></li> <li><input type="text" v-model="backgroundColor"/><label>Background Color</label></li> <li><input type="text" v-model="fontColor"/><label>Font Color</label></li> <li><input type="range" v-model="range" min="15" max="85"><label>Position</label></li> </ul> </div> <script src="script.js"></script> </body></html>
var card = new Vue({ el: "#card", data: { title: "Style Bindings", isRounded: false, sizeToggle: false, disabled: false, backgroundColor: ‘#CCCCCC‘, fontColor: "#000000", range: 50 }, computed: { styles: function(){ return { color: this.fontColor, background: this.backgroundColor, ‘margin-left‘: this.range+"%" } } }});
body { padding: 2em; font-family: sans-serif;}#card { border: 2px solid Gray; border-radius: 10px;}.rounded { border-radius: 10px;}.large { font-size: 2em;}label { margin-left: 1em;}button:disabled { opacity: .5; cursor: not-allowed;}#card header { display: block; border-radius: 8px 8px 0 0; background: orange; padding: 10px; color: white; font-size: 1.5em; margin-bottom: 1em;}#card div, #card p { padding:1em;}#card ul { list-style: none; margin: 0; padding: 0 1em 1em;}#card ul li { padding: .25em; border: 1px solid gray; margin: .5em 0; border-radius: 3px;}
[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。