在vue中使用js排他思想 以及jQuery中的动画

1 在webpack.base.conf.js文件中如下配置  并且执行npm i jqery --save

resolve: {

extensions: [ '.js', '.vue', '.json'],

alias: {

'vue$' : 'vue/dist/vue.esm.js',

'@' : resolve( 'src'),

'scss_vars' : '@/styles/vars.scss'

}

},

//引入jQuery 需要添加的配置文件

plugins: [

new webpack. ProvidePlugin({

$: "jquery",

jQuery: "jquery",

jquery: "jquery",

"window.jQuery" : "jquery"

})

],

//.........................................

2 在需要用到jQuery的组件中 

import $ from "jquery";

import "../../assets/ztree/js/jquery.ztree.core.js";

export default {

data() {

return {

},

3 在需要绑定点击事件的地方 进行绑定事件

   < div id= "span" >< img src= "../assets/images/zd-arrow-right.png" alt= "" @click=" toggleShow" ></ div >

首先定义一个开关

   data() {

     return {

       flag: true,

    }

  },

然后点击的时候改变flag的值 对flag进行判断 补充一下jQuery

$( selector).animate({ params} ,speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

toggleShow() {

         this. flag = ! this. flag

         console. log( this. flag)

         if(! this. flag){

           $( '#buildType'). animate({ left: "435px"}, 'slow', function() {

             $( '#span')[ 0]. style. transition = 'all 0.5s';

             $( '#span')[ 0]. style. transform = 'rotate(180deg)';

          })  

        } else {

           $( '#buildType'). animate({ left: "0"}, 'slow', function() {

             $( '#span')[ 0]. style. transition = 'all 0.5s';

             $( '#span')[ 0]. style. transform = 'rotate(360deg)';

          })

        } 

      }

js中的排他思想  两层for循环

var buildBox = $( '#top_units')[ 0];

       var lis = buildBox. children;

       for( let i = 0; i< lis. length; i++){

           lis[ i]. onclick = function() {

             for( var j = 0; j < lis. length; j++){

               lis[ j]. children[ 0]. style. backgroundColor = '';

               lis[ j]. children[ 1]. style. color = '';

            }

             this. children[ 0]. style. backgroundColor = '#2093EF';

             this. children[ 1]. style. color = '#2093EF';

        }

      }

注意一点 jQuery对象转换为js对象的几种转换方法 var buildBox = $('#top_units')[0];