原来的html页面在用到Vue后一些效果无法实现的解决方案

原来的html页面在用到Vue后一些效果无法实现的解决方案

原来页面的效果，比如鼠标经过北京颜色改变等效果都是利用js以及jq就行改变的，这就容易在使用Vue后就无法正常使用，那怎么办呢？？？？

其实解决的办法很简单，那就是找到之前的jq代码，复制到vue中封成方法在适当的位置利用适当的事件进行触发

例如：

<script>
$(function () {
  $(".out1").hide();
  $(".bian").mousemove(function () {
      var i = $(this).index(".bian");
      $(".up1").eq(i).hide();
      $(".out1").eq(i).show();
      $(".bian").eq(i).css({
          "color": "#fff",
          "background-color": "#FE8D01"
      });
  })
  $(".bian").mouseout(function () {
      var i = $(this).index(".-bian");
      $(".out1").eq(i).hide();
      $(".up1").eq(i).show();
      $(".bian").eq(i).css({
          "color": "#000",
          "background-color": "#fff"
      })
  })
  });
        </script>

 hover: function(ket){
//console.log(ket);
	$(".mouseup1").eq(ket).hide();
	$(".mouseout1").eq(ket).show();
	$('.slide-bian').eq(ket).css({
		"color": "#fff",
		 "background-color": "#FE8D01"
	}).siblings().css({
		"color": "#000",
		 "background-color": "#fff"
	})
},  
hov:function(ket){
	console.log(ket);
	$(".mouseout1").eq(ket).hide();
	$(".mouseup1").eq(ket).show();
	$('.slide-bian').eq(ket).css({
		"color": "#000",
		"background-color": "#fff"
	})
},

<li class="bian" v-for="(na,ket) in newsall" v-show="na.xs=='是'" @mouseover="hover(ket)" @mouseout="hov(ket)">

把代码一改就完成了就完成了