单独页面demo  

<template>
 <ul>
   <!--@click点击选中样式-->
   <!--:class选中样式,仅在current等于某个索引时且current不为空时生效-->
   <li v-for="(item,index) in lists"
       @click="choose(index)"
       :class="{active: index == current && current !== ''}"
       :key="index">
     {{item}}
   </li>
 </ul>
 <button type="button" @click="add()">添加</button>
 <!--输出target-->
 <ul>
   <li v-for="(item,index) in target" :key="index">{{item}}</li>
 </ul>
</template>

<script>
 export default {
   name: 'Info',
   data () {
     return {
       current: '',
       lists: [1,2,3,4,5,6,7,8,9],
       target: []
     }
   },
   methods:{
     //选中时改变current的值
     choose (index){
       this.current = index;
       console.info(index);
     },
     //点击添加按钮时把当前选中值加到目标数组
     add(){
       if(this.current === ''){  //为空时不添加
         return;
       }
       this.target.push(this.lists[this.current]);
       /*添加后清空*/
       this.current = '';
     }
   }
 }
</script>

<style scoped>
   /*选中的li加背景色*/
   li.active{
     background:green;
   }
</style>

v-for要给key

vue serve 组件名如demo.vue，运行单个组件

JS中click事件可获取对应的data属性，如点击某元素后可获取其index等。

如何在页面中使用vuex: import store from '@/store'

在info中如何改变他的状态 : 在 add方法中 store.commit('store中的方法名')

如何将值传递到 about的组件中: 在about中 引入:
import store from '@/store'
export default {
  name: 'about',
  data() {
    return {
      msg: store.state.count
    }
  }
}

vue serve xxx.vue可以快速调试xxx组件文件

data中的另外一个写法：data(){return{key:value}}

v-for的写法:v-for="(item,index) in lists" :key="index"

Vue 选中切换

源码 https://github.com/kanlidy/vue-lessons-demo

vue serve demo1.vue-->快速调试该组件

<ul>

    <li v-for="(item,index) in lists"

           @click="choose(index)"

            :class="{active : index == current && current !==' '}"

           :key="index">

        {{item}} 

    </li>

</ul>

<button type="button" @click="add()"></button>

<ul>

    <li v-for="(item,index) in target" :key="index">{{item}}</li>

</ul>

<script>

export default{

    name: "demo1",

    data () {

        return{

            current: '',//用于记录

            lists:[1,2,3,4,5,6,7,8,9]，

            target:[]

        }

    },

    methods: {

        choose (index){

            this.current = index

        },

        add(){

    if(this.current === ' '){ return }//只有选中后，点击‘添加’才会产生列表

      this.target.push(this.lists[this.current])

      this.current = ' '//设置成只有点击数字后才能记录

        }

    }

}

</script>

<style scoped>

li.active{

    background : green;

}

</style>

//==========================

源码 https://github.com/kanlidy/vue-lessons-demo

好神奇的限界逻辑，原来成熟的逻辑都是一步步被打磨出来的

9：05？？？？？？？？？