Vue 条件渲染

vue 条件渲染，v-if ,v-show;这两个的值是true时候，dom中的元素都会渲染出来，当值为false的时候，if渲染的元素不会在dom中出现，show渲染的dom元素是style:display:none;两者有这样的区别，同时v-if else 两者使用的时候中间不能有其他的元素，否则会失效，例如在两个div中，一个div是v-if,另一个是else,在这两个div中都有input标签，当input标签发生change实际的时候，v-if的值由false变成true,如下面的例子：在这里邮箱显示的，当发生chang事件时候即方法hanleFinish执行，改变show的值，这里input必须加key值，值可以自定义，不然在邮箱里输入的值会在用户名的input上显示出来。

<div v-if="show">
 用户名： <input type="text" key="one">
</div>
<div v-else>
  邮箱名: <input type="text" @change="hanleFinish" key="two">
</div>

<script>
  export default {
    props: ['list'],
    data ()
    {
     return {
        show:false,
      }，

methods: {
  hanleFinish(){
    this.show = true;
  }
},   }

</script>
在vue组件和实例中都有$set方法，这样可以添加对象属性和属性值和更改数组的值
例如：改变数组arry第二项为5，给obj对象添加属性company:三一,用这样的方法就可以改变添加。

<button @click="changeItem">change</button>
<template v-for="item of arry">
  <ul ><li>{{item}}</li></ul>
</template>
<template v-for="(item,key) of obj">
<p >{{item}}--{{key}}</p>
</template>

<script>
  export default {
    data ()
    {
      return {
        arry:[1,2,3,4,5,6,7],
        obj:{
          school:'江南大学',
          age:32,
          work:"前端开发"
        }
      }
    },
    methods: {
      changeItem(){
        this.$set(this.arry,1,5);
        this.$set(this.obj,"company","三一");
      },
}