v-show v-else ，v-once ，radio 方法的使用

{{msg}}

<h2>radio</h2>
    <label>男</label>
    <input type="radio" value="男" v-model="sex" />
    <label>女</label>
    <input type="radio" value="女" v-model="sex" />
    <p>{{sex}}</p> 

选中男或女下方会同步输出你所选的
需要用双向绑定 和radio方法即可实现

v-once 只有第一次渲染的时候才进行执行，之后的操作都被视为静态内容，跳出之后的所有渲染过程

  <h3>v-once</h3>
    <input type="text" v-model="text" />
    <p  >{{text}}</p>

输入框输入内容可以同步打印在下方
v-once这个方法是只能渲染一次

    <h4> v-show  v-else</h4>
    <div v-show="isShow">
     我蹦出来了
</div>

   
    <button @click="toggle">切换</button>

点击切换会换值 我这里没输入v-else所以点击切换页面上没内容

//v-model 双向绑定 
// 视图->数据  视图<-数据 mvvm
//v-if v-else table 切换
//v-show 用来显示和隐藏 通过display：none

// v-if v-show 
//1.减少dom操作  
//v-if是直接替换节点
// v-show是在节点上添加display：none并没有删除节点
//如果需要大量操作dom优先选择v-show 因为减少了dom操作

vue代码块

  new Vue({
        el: "#app",
        data: {
            isShow:true,
            msg: "haha",
            text: "s",
            like: {
                ball: true,
                pingpang: false
            },
            sex: "男"
        },
        methods: {
            change(event) {
                console.log(event.traget.value);
            },
            toggle(){
                this.isShow = !this.isShow
            },
        }
    });