需求如下

1、vue项目（一般都用到了element-ui框架）

2、把鼠标放在上面显示消息

3、这个消息框要美化

实现的效果

方案一、使用v-bind:title=""

1、如果是方法赋值：v-bind:title="{{app}}"

 <div class="item" style="background-color:#ce72ef" v-bind:title="{{numbers}}"></div>

2、如果是变量赋值：v-bind:title="fz(1)"

 <div class="item" style="background-color:#ce72ef" v-bind:title="fz(1)"></div>

注意一点：如果是方法的话，方法里面要有返回值

不好的地方：弹框很原始没有效果

方案二、Tooltip 文字提示

这部分的教程点这个

1、如果弹框是常量，不变的文字，那么参考教程就可以了

2、如果是变量

 <el-tooltip  placement="bottom" effect="light">
                 <div slot="content" v-html="{{app}}"></div>
                <el-button class="item" style="background-color:#7ac0ae"></el-button>
              </el-tooltip>

2、如果是方法的返回值

 <el-tooltip  placement="bottom" effect="light">
                 <div slot="content" v-html="showData(1)"></div>
                <el-button class="item" style="background-color:#7ac0ae"></el-button>
              </el-tooltip>

 

注意一点：如果是方法的话，方法里面要有返回值