Skip to main content

指令

HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

指令作用
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if
v-else-if条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else
v-show根据条件展示某元素，区别在于切换的是display属性的值
v-for列表渲染，遍历容器的元素或对象的属性
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        // v-bind
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a></a>
    	// v-model
        <input type="text" v-model="url">        
    </div>
</body>
<script>
    // 定义Vue对象
    new Vue ({
        el: "#app",  // Vue接管区域(指id)
        data: {
            message: "Hello Vue",
            url: "https://www.baidu.com"
        }
    })
</script>
// v-on
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="submit" value="点我一下" v-on:click="handle()">
        <input type="submit" value="点我一下" @click="handle()">
    </div>
</body>
<script>
    new Vue ({
        el: "#app",
        data: {},
        methods: {
            handle: function () {
                alert("你点了我一下……");
            }
        }
    })
</script>
// v-if ---- v-show
<head>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人（35及以下）</span>
        <span v-else-if="age > 35 && age < 60">中年人（35-60）</span>
        <span v-else>老年人（60及以上）</span>
        <br>
        <span v-show="age > 60">老年人（60及以上）</span>
    </div>
</body>
<script>
    new Vue ({
        el: "#app",
        data: {
            age: 20
        },
        methods: {}
    })
</script>
// v-for
……
<body>
    <div id="app">
        <div v-for="addr in addrs">{{ addr }}</div>
        // 带序号的
        <div v-for="(addr, index) in addrs">{{ index + 1}} : {{ addr }}</div>
    </div>
</body>
<script>
    new Vue ({
        el: "#app",
        data: {
            addrs: ["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {}
    })
</script>