Vue指令

最新推荐文章于 2024-10-18 15:58:53 发布

NaZiMeKiY

最新推荐文章于 2024-10-18 15:58:53 发布

阅读量581

点赞数 15

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

本文链接：https://blog.csdn.net/NaZiMeKiY/article/details/137676032

版权

javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的关键指令，包括v-bind用于绑定属性值，v-model实现双向数据绑定，v-on绑定事件，v-if/v-else-if/v-show进行条件渲染，以及v-for用于列表渲染。通过实例演示了如何在HTML中使用这些指令来控制元素的展示和数据交互。

摘要由CSDN通过智能技术生成

一.常用指令

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

2.常用指令

v-bind为HTMl标签绑定属性值，如设置href，css样式等等

v-model在表单元素上创建双向数据绑定

<!DOCTYPE html>
<html lang="en">
<script src="vue.js">//引入vue文件</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>

<body>
    <div id="app">
        <a v-bind:href="URL">link</a>
        <input type="text" v-model="URL">
    </div>
</body>

</html>
<script>
    //定义vue对象
    new Vue({
        el: "#app",//vue所接管的区域
        data: {
            URL: "https://www.baidu.com"
        }
    })
</script>

v-on为HTML标签绑定事件（省略格式为@click）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">

        <input type="button" value="button1" v-on:click="handle()">

        <input type="button" value="button2" @click="handle()">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data: {

        },
        methods: {
            handle: function () {
                alert("点击")
            }
        }
    })
</script>

</html>

v-if条件判断

v-else-if条件性地渲染某元素，判定为true时渲染

v-else排除了同一类的所有if中的条件判断后进行的条件判断

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="vue.js">//引入vue文件</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="35 < age && age <=60">中年人</span>
        <span v-else>老年人</span>
    </div>
</body>

</html>
<script>
    //定义vue对象
    new Vue({
        el: "#app",//vue所接管的区域
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

v-show根据条件展示某元素，区别在于切换的是display属性的值（与条件判断不同的是即使不满足条件，其仍然会渲染，只是不展示出来）

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="vue.js">//引入vue文件</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <div id="app">
        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age <= 35">年轻人</span>
        <span v-show="35 < age && age <=60">中年人</span>
        <span v-show="age >= 60">老年人</span>
    </div>
</body>

</html>
<script>
    //定义vue对象
    new Vue({
        el: "#app",//vue所接管的区域
        data: {
            age: 20
        },
        methods: {

        }
    })
</script>

v-for列表渲染，遍历容器的元素或者对象的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <script src="vue.js">//引入vue文件</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>
    <script>
        //前面的addr相当于是形参，后面的address则是我们存放数据的数组，index是每一个数据的索引
    </script>
    <div id="app">
        <div v-for="(addr,index) in address">{{index}}:{{addr}}</div>
    </div>
</body>

</html>
<script>
    //定义vue对象
    new Vue({
        el: "#app",//vue所接管的区域
        data: {
            address: ["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {

        }
    })
</script>