vue demo

1.折叠效果：

           <div v-for="(item,index) in mydatas">
             <!-- 标题 -->
             <div class="titleclass" @click="clickitem(index)" :id="'item_'+index">
                  {{item.title}}
                  <div v-if="index===0"> <div class="jtupcss" :id="'item_jt'+index"></div></div>
                  <div v-else> <div class="jtdowncss" :id="'item_jt'+index"></div></div>

             </div>
              <!-- 第一项默认展开 -->
             <div v-if="index==0">
               <ul :style="{'display':'block'}" :id="'item_s'+index">
                  <li v-for="(data,index1) in item.content" >
                    {{data.name}}
                  </li>
               </ul>
             </div>
             <!-- 其它项默认不展开 -->
             <div v-else>
               <ul :style="{'display':'none'}" :id="'item_s'+index">
                  <li v-for="(data,index1) in item.content" >
                    {{data.name}}
                  </li>
               </ul>
             </div>
          </div>

模型数据：

 

 var vm = new Vue({
      el:"#container",
      data:{
        mydatas:[
          {

            title:'标题1',
            content:[
              {name:'TigerChain',address:'中国'},
              {name:'TigerChain1',address:'中国'},
              {name:'TigerChain2',address:'中国'},
              {name:'TigerChain3',address:'中国'},
              {name:'TigerChain4',address:'中国'},
              {name:'TigerChain5',address:'中国'},
              {name:'TigerChain6',address:'中国'},
              {name:'TigerChain7',address:'中国'},
              {name:'TigerChain8',address:'中国'}
            ]
          },
          {

            title:'标题2',
            content:[
              {name:'马超',address:'中国'},
              {name:'TigerChain1',address:'中国'},
              {name:'TigerChain2',address:'中国'},
              {name:'TigerChain3',address:'中国'},
              {name:'TigerChain4',address:'中国'},
              {name:'TigerChain5',address:'中国'},
              {name:'TigerChain6',address:'中国'},
              {name:'TigerChain7',address:'中国'},
              {name:'TigerChain8',address:'中国'}
            ]
          },
          {

            title:'标题3',
            content:[
              {name:'刘斌',address:'中国'},
              {name:'TigerChain1',address:'中国'},
              {name:'TigerChain2',address:'中国'},
              {name:'TigerChain3',address:'中国'},
              {name:'TigerChain4',address:'中国'},
              {name:'TigerChain5',address:'中国'},
              {name:'TigerChain6',address:'中国'},
              {name:'TigerChain7',address:'中国'},
              {name:'TigerChain8',address:'中国'}
            ]
          }

        ],

 

点击事件：

 clickitem(index) {
          var el = this.$el.querySelector('#item_s'+index).style ;
          var img = this.$el.     ('#item_jt'+index) ;
          console.log(img.className)
          if(el.display=='none'){
            // 使用两种方式 ，修改 style 和 动态设置 css 完成「两种方式都可以，使用 动态修改 className 灵活一些」
             el.display = "block"
             img.className = "jtupcss"
          } else if (el.display=='block'){
            el.display = "none"
            img.className = "jtdowncss"
          }
        }
      }

效果图：

 

 

selelctmeaue:

   <div >
                    <div class="selectstyle" @click="showList">{{title}}</div>
                    <div :class="'listRoot'">
                    <!-- 列表添加上过渡效果-->
                    <transition-group name="list" >
                        <li v-show="isShorOrHideList"  @click="select(index)" :class="['liststyle',currentindex==index?'active':'liststyle']" v-for="(item,index) in datas" 
                        @mouseenter ="showCurrentBg(index)" @mouseleave="showCurrentBg(-1)" :key="index">
                            {{item.name}}
                        </li>
                    </transition-group/>
                    </div>
                </div>

数据模型：

 

 data() {
                return {
                    title:'选择',
                    currentindex:-1,
                    isShorOrHideList:false,
                    datas:[
                        {name:'选择1'},
                        {name:'选择2'},
                        {name:'选择3'},
                        {name:'选择4'},
                        {name:'选择5'},
                        {name:'选择6'}
                    ],
                }
            },

 

 

显示列表：

  // 显示列表 
                showList() {
                    this.isShorOrHideList = ! this.isShorOrHideList
                },
                //鼠标停留在当前的列表选项上
                showCurrentBg(index){
                    this.currentindex = index
                    // console.log(index)
                },
                //点击列表 
                select(index){
                    this.isShorOrHideList = false;
                    this.title = this.datas[index].name
                }

 

 

效果图：

 

3.vue 实现商品选中效果：

<li v-for="(data,index) in datas">
        <div class="header">{{data.title}}</div>
        <div class="content">

          <ul class="contentul">
            <li class="contentitem" v-for="(content,index) in data.content" @click="change(index,$event)">
              {{content.name}}
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <div @click="clear" v-show="selectDatas.length>0">一键清空</div>
    <span v-show="selectDatas.length>0">当前选择的是：</span>
    <span v-for="(item,index) in selectDatas">
      {{item}}
    </span>

 

DATA:

 

 data:{
      selectDatas:[],
      cssStyles:[],
      datas:[
        {
          title:'标题1',
          content:[
            {name:'内容1'},
            {name:'内容2'},
            {name:'内容3'},
            {name:'内容4'},
            {name:'内容5'},
            {name:'内容6'},
            {name:'内容7'},
            {name:'内容8'},
            {name:'内容9'},
          ]
        },
        {
          title:'标题2',
          content:[
            {name:'选择1'},
            {name:'选择2'},
            {name:'选择3'},
            {name:'选择4'},
            {name:'选择5'},
            {name:'选择6'}
          ]
        },
        {
          title:'标题3',
          content:[
            {name:'内容1'},
            {name:'内容2'},
            {name:'内容3'},
            {name:'内容4'},
            {name:'内容5'},
            {name:'内容6'}
          ]
        },

      ]

 

方法采用：

 methods:{
        change(index,event) {
          var e = event.target

          // console.log(e.name)
          if(e.className == 'contentitem'){
            e.className = 'contentitemSelect'
            this.selectDatas.push(e.innerText)
            this.cssStyles.push(e)
          }else if(e.className=='contentitemSelect'){
            e.className = 'contentitem'
            this.selectDatas.remove(e.innerText)
            this.cssStyles.remove(e)
          }
        },
        clear() {
          // console.log(this.$el.querySelectorAll('.contentitem'))
        for(i=0;i<this.cssStyles.length;i++){
          this.cssStyles[i].className = 'contentitem'
        }
          this.selectDatas = []
        }


    }

vue   吸顶效果：

 handleScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
        var offsetTop = this.$el.querySelector('#tabbar').offsetTop
        // console.log(this.$el)
        // 如果页面滚动的距离> tab 的偏离量高度，那么就悬浮
        if (scrollTop > offsetTop) {
          this.isFix = true
        } else {
          this.isFix = false
        }

        this.headerHeight = this.$el.querySelector('.head').clientHeight
         this.titleBarHeight = this.$el.querySelector('#tabbar').clientHeight
      },

计算器问题：

 

 switch(flag){
            case 'clear':
              this.content = 0
            break ;
            case 'delete':
              // 逐个删除 
              this.content = this.content.slice(0, -1);

            break ;
            case '7':
            case '8':
            case '9':
            case '*':
            case '4':
            case '5':
            case '6':
            case '/':
            case '1':
            case '2':
            case '3':
            case '-':
            case '0':
            case '.':
            case '+':
              this.content+=flag
            break ;
            case '=':
            // 这里只是做个简单判断，有问题，不严格
            if(!isNaN(this.content) || isContains(this.content,'+') || isContains(this.content,'-') || isContains(this.content,"*") || isContains(this.content,"/")){
                this.content = eval(this.content)
            }else{
              alert('非法输入')
            }

vue 选择tab 问题：

1.填充数据：

el: '#container' ,
      data: {
        dataList: [
          {text:'标签1',isActive:true},
          {text:'标签2',isActive:false},
          {text:'标签3',isActive:false},
          {text:'标签4',isActive:false}
        ]
      },

 

2。使用方法：

methods: {
        select(data){
          // 默认都为 false 不显示样式
          this.dataList.forEach(function(item){
              item.isActive = false;
          });
          // 选中那个让那个显示样式
          data.isActive = !data.isActive;
        }