1、在js代码中的data节点中，定义一个数据

<script>
export default {
  name: 'HelloWorld',
  show_div: true,
  data () {
    return {
      title: 'test title',
      list: [
        {
          id: 1,
          name: 'likang'
        }, {
          id: 2,
          name: 'likang2'
        }
      ]
    }
  }, 
  methods: {
    showdiv: function () {
      this.show_div = !this.show_div;
    }
  }
}
</script>

2、HTML页面

<h1>{{title}}</h1>
<ul>
  <li v-for="(v,k) in list" v-bind:class="red"  v-bind:key="k">
    <span> {{v.name}}</span>
 </li>
</ul>

<div v-if="show_div">
  {{show_div}}
</div>
<button @click="showdiv()">显示/隐藏</button>

3、代码解析

<h1>{{title}}</h1>

{{}}中放置变量，title代表在data中定义的变量。

<ul>
  <li v-for="(v,k) in list" v-bind:class="red"  v-bind:key="k">
    <span> {{v.name}}</span>
 </li>
</ul>

其中 v-for代表是遍历的意思, （v,k)其中v代表便利出来的数据，k代表数组的下标，v-bind代表给标签绑定属性。 v-bind:key=k 代表遍历对象的key

<div v-if="show_div">
  {{show_div}}
</div>
<button @click="showdiv()">显示/隐藏</button>

其中 v-if代表判断，判断在data中定义的show_div是否为真，如果为真，表示改元素显示，否则不显示

button按钮中 @click表示给button添加点击事件，调用showdiv方法，会自动调用到在method中定义的方法。

绑定点击事件也可以使用v-on:click绑定。@click为简写方式。

其他相关的事件

click  点击
dbclick 双击
keydown 键盘按下
keyup 键盘抬起
mouseover  鼠标放上去
mouseout。鼠标移开

this.show_div = !this.show_div;

表示给data中的 show_div赋值，如果show_div为true则改为false，如果为false修改为true，这样就可以控制元素的现实和隐藏了。

隔行变色

<table style="width: 90%;" border="1" cellpadding="0" cellspacing="0">
      <tr v-for="(v,k) in user_list" :class="{blue:k%2==0}">
        <td>{{v.user_id}}</td>
        <td>{{v.user_name}}</td>
        <td>
          <span v-if="v.sex == 1">男</span>
          <span v-else-if="v.sex == 2">女</span>
          <span v-else>保密</span>
        </td>
      </tr>
    </table>
    ```