VUE——常用指令

最新推荐文章于 2024-06-14 10:39:01 发布

小王在学习了

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量215

点赞数 5

分类专栏： JavaWeb 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wlx2513/article/details/137223475

版权

JavaWeb 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

v-bind

作用：为HTML标签绑定属性值。

<a v-bind:href=""></a>
//省略版
<a :href=""></a>

v-model

作用：在表单元素上创建双向数据绑定。

<input type="text" v-model="">

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="vv">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">{{url}}
    </div>
</body>
<script>
    new Vue({
        el: "#vv",
        data: {
            url: "https://www.baidu.com"
        }   
    })
</script>
</html>

v-on

作用：为HTML标签绑定事件

<input type="button" value="" v-on:event="func()">
<input type="button" value="" @event="func()">
//event=click/focus/blur（点击/聚焦/离散）

new Vue({
    el: "",
    data: {
    },
    methods: {
        func:function(){
        }
    },
})

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="vv">
        <input type="button" value="点击1" v-on:click="h()">
        <input type="button" value="点击2" @click="h()">
    </div>
</body>
<script>
    new Vue({
        el: "#vv",
        data: {
        },
        methods: {
            h:function(){
                alert("ok");
            }
        },
    })
</script>
</html>

v-if、v-else-if、v-else

作用：条件性的渲染某元素，判定为true时渲染，否则不渲染。

<span v-if=""></span>
<span v-if=""></span>
<span v-if=""></span>

v-show

作用：根据条件展示某元素，区别在于切换的是display属性的值。

<span v-show=""></span>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="vv">
        v-if、v-else-if、v-else:<br>
        年龄:<input type="text" v-model="age">
        <br>经判定为:
        <span v-if="age < 35">年轻人</span>
        <span v-if="age >= 35 && age <60">中年人</span>
        <span v-if="age >= 60">老年人</span>
        <br><br>
        v-show:<br>
        年龄:<input type="text" v-model="age">
        <br>经判定为:
        <span v-show="age < 35">年轻人</span>
        <span v-show="age >= 35 && age <60">中年人</span>
        <span v-show="age >= 60">老年人</span>

    </div>
</body>
<script>
    new Vue({
        el: "#vv",
        data: {
            age: 22
        },
        methods: {
            }
        },

    })
</script>
</html>

v-for

作用：列表渲染，遍历容器的元素或者对象的属性。

//方法一
<div v-for="(item, index) in items"></div>
//方法二
<div v-for="item in items"></div>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="vv">
        <div v-for="(addr, index) in addrs">
            {{index}}:{{addr}}
        </div>
        <br>-----------------------------<br>
        <div v-for="(addr, index) in addrs">
            {{index+1}}:{{addr}}
        </div>
        <br>-----------------------------<br>
        <div v-for="addr in addrs">
            {{addr}}
        </div>
        <div v-for="(item, index) in items"></div>
    </div>

</body>
<script>
    new Vue({
        el: "#vv",
        data: {
            addrs: ["北京" ,"福建","广东"]
        },

    })
</script>
</html>