欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 绑定 class 和 内联样式(style)

程序员文章站 2022-07-04 16:25:49
...
 <div id="app31">
        <!--多个属性 ,号隔开-->
        <!-- v-bind:style="{fontSize: fontSize + 'px'}"   绑定内联样式-->
        <!--v-bind:class="{Class1:isActive}"  class1+bool   class需要我们自己定义  绑定一个class-->
        <div v-bind:id="id" v-bind:title="title" v-bind:style="{fontSize: fontSize + 'px'}" v-bind:class="{Class1:isActive}"
v-on:click="GetInfo(id+title)">{{ info }}</div> // 传参 </div>

  实现:

new Vue({
        el: "#app31",
        data() { 
            return {

                info: '111',
                id: 121321,
                title: '222',
                isActive: true,   // 是否生效
                fontSize:40
            }
        },
        //data: {
           
        //},
        methods: {
            GetInfo: function (e) {
                alert(e);
            }

        }
    });