[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind
2023-09-14 08:59:19 时间
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; }
相关文章
- js面试题及答案2020_JS面试题大全
- js实现replaceAll方法
- 【说站】js有哪些改变自身值的方法
- Js之Navigator对象「建议收藏」
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- VUE组件封装_vue组件内部双向绑定
- Vue学习笔记之moment.js日期处理控件
- Node.js笔记
- 【JS 逆向百例】猿人学系列 web 比赛第二题:js 混淆 - 动态 cookie,详细剖析
- 开心档之Vue.js 组件
- 网站在线客服系统实时语音视频聊天实战开发,利用peerjs vue.js实现webRTC网页音视频客服系统
- vue入门篇之Vue.js 组件
- Vue提示框组件vue-notification使用实例演示
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- 用Vue.js开发企业管理后台,我做到了
- 开源基于 Node.js 的高速视频制作库,轻量,灵活的短视频加工库
- JS动态引入js、CSS动态创建script/link/style标签详解编程语言
- vue.js 路由参数传给组件详解编程语言
- vue.js element-ui select选择器 选中对象详解编程语言
- 使用 JS 操作 Redis:实现强大数据存储.(js调用redis)
- JS在Oracle中的应用(js如何oracle)
- 兼容IE与Firefox的js复制代码
- js对象之JS入门之Array对象操作小结
- 向左滚动文字js代码效果
- js设置组合快捷键/tabindex功能的方法
- js获取url参数代码实例分享(JS操作URL)
- PHP小技巧之JS和CSS优化工具Minify的使用方法
- js控制当再次点击按钮时的间隔时间