Vue常用指令

• 指令：HTML标签上带有v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for...

• 常用指令

  

v-bind

<a v-bind:href="url">百度一下</a>
<!--
v-bind 可以省略
-->
<a:href="url">百度一下</a>

v-model

<input name="username" v-model="username">

v-on

• html:

    <input type="button" vue="一个按钮" v-on:click="show()">
    <input type="button" vue="一个按钮" @click="show()">

• vue:

<script src="js/vue.js"></script>
<script>
    // 1. 创建Vue核心对象
    new Vue({
        el:"\#app",
        data(){
            return {
                username: "",
                url:"https://www.baidu.com"
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
        /*data:function (){
            return {
                username:""
            }
        }
        简化格式*/

    });
</script>

v-if

<div v-if="count == 3">div1</div>
<div v-else-fi="count == 4">div2</div>
<div v-else>div3</div>

v-show

<div v-show="count==3">div4</div>

v-for

<div v-for="addr in addrs">
    {{addr}}<br>
</div>

加索引

<div v-for="addr in addrs">
    <!--i 表示索引，从0开始-->
    {{i+1}}:{{addr}}<br>
</div>