[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;
}
复制代码

 

posted @   Zhentiw  阅读(258)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae