VUE命令

作者: 卐_c2a9 | 来源:发表于2018-09-14 20:15 被阅读0次

    VUE主要包括(v-for,v-on,v-model,v-show,v-bind等)

    1.v-model:双向绑定元素,一般用于表单元素。

    <div id="itany">

    <button v-on:click="alt">按钮<button>

    <script src="vue/js/vue.js"></script>

    <script>

    var vm=new Vue({

    el:"#itany",

    data:{

    msg:"hello"

    },

    methods:{

    alt:function(){

    console.log(vm.msg)

    }

    }

    })

    </script>

    2.v-show:控制元素的显示和隐藏。

    <div id="itany">

    <h3>{{msg}}</h3>

    <h1 v-show="!see">{{msg}}</h1>

    </div>

    <script src="vue/js/vue.js"></script>

    <script>

    new Vue({

    el:"#itany",

    data:{

    msg:"hello vue",

    see:true

    }

    })

    </script>

    3.v-bind:用于绑定属性。

    <div id="itant">

    <img v-bind:src="url" alt="">

    </div>

    <script src="vue/js/vue.js"></script>

    <script>

    new Vue({

    el:"#itant",

    data:{

    url:"images/3.jpg"

    }

    })

    </script>

    4.v-if或v-else或v-else-if

    <div id='itany'>

    <p v-if='num==0'>00000000000</p>

    <p v-else-if='num==1'>1111111111</p>

    <p v-else-if='num==2'>22222222</p>

    <p v-else-if='num==3'>22222222</p>

    <p v-else-if='num==4'>22222222</p>

    <p v-else='num==5'>555555555555</p>

    </div>

    <script src='js/vue.js'></script>

    <script>

    new Vue({

    el:'#itany',

    data:{

    // num:Math.floor(Math.random()(max-min+1)+min) 随机数的计算公式

    num:Math.floor(Math.random()(5-0+1)+0) |

    }

    })

    </script>

    相关文章

      网友评论

          本文标题:VUE命令

          本文链接:https://www.haomeiwen.com/subject/pydagftx.html