大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题，说来也不难，但还是花费了我的好些时间，保持习惯记录一下。在前端学习中不免遇到一个 div 或者一个 数组 的循环产生，因为挨个儿传数据显然不是最优的。这里讲述的是 Vue 中的 v-for循环，生成的是 div 块。 v-for，可以循环普通的 数组 ，数字，对象。这些在其他优秀博主那里会得到非常详细的介绍，参考如下： http://t.csdn.cn/aBwsD 我就不做赘述啦。 简单说明一下，当前的页面只有一个 div 块级元素，需求是 <!-- 信息查看层 --> < div class="float Div " :style="{display: isShow,left: floatLeft,top: floatTop}"> <p>{{floatData.name}}</p> <p&... 以上代码将在鼠标移入时设置showText为true，在鼠标移出时设置showText为false。 2. 在data属性中，定义showText变量，并将其默认值设置为false，例如： data() { return { showText: false 3. 在 div 中动态绑定v-if或v-show指令，根据showText的值控制文字的显示和隐藏，例如： < div @mouseover="showText=true" @mouseleave="showText=false"> 鼠标悬浮显示文字 <span v-if="showText">这是要显示的文字</span> </ div > 以上代码将在showText为true时显示文字，“这是要显示的文字”，当showText为false时，文字将自动隐藏。 通过以上实现方法，即可在 Vue 中实现鼠标悬浮在 div 上显示文字的效果。