vue class、style样式绑定

Love The Way You Lie 2021-11-02 09:02 588阅读 0赞

  • class对象方式绑定



    Hello world

    1. <script> var vm = new Vue({ el: '#app', data:{ isAcrivated: false }, methods:{ handleDivClick: function(){ this.isActivated = !this.isActivated; } } }); </script>

  • class数组方式绑定



    Hello world

    1. <script> var vm = new Vue({ el: '#app', data:{ activated: "" }, methods:{ handleDivClick: function(){ this.activated = this.activated ==="activated" ? "" : "activated" } } }); </script>

  • 内联style方式绑定



    Hello world

    1. <script> var vm = new Vue({ el: "#app", data: { styleObj:{ clolor: 'black' } }, methods:{ handleDivClick: function(){ this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }); </script>

  • 内联style引用数组形式绑定样式



    Hello world

    1. <script> var vm = new Vue({ el: '#app', data: { styleObj: { color: "black" } }, methods: { handleDivClick: function(){ this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }); </script>

发表评论

表情：
评论列表 （有 0 条评论，588人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue绑定样式

    3.1、绑定class 绑定class样式--字符串写法，适用于:样式的类名不确定，需要动态指定 <div class="basic" :class="mood"

    灰太狼灰太狼/ 0 赞/ 86 阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 459 阅读