v-show指令、v-if指令、v-for指令、v-bind指令

最新推荐文章于 2022-11-30 19:18:27 发布

赵云0726

最新推荐文章于 2022-11-30 19:18:27 发布

阅读量419

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_47230916/article/details/108038249

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

v-show和v-if
相同点：
都是条件渲染，取值为true就显示，取值为false就不显示。
区别：
v-if：只要取值为false就不会创建元素。
v-show：哪怕取值为false也会创建元素，只是如果取值是false会设置元素的display为none
v-if和v-show应用场景
由于取值为false时v-if不会创建元素，所以如果需要切换元素的显示与隐藏，每次v-if都会创建和删除元素。
由于取值为false时v-show会创建元素并设置display为none,所以如果需要切换元素的显示与隐藏，不会创建和删除，只是修改display的值。
所以如果企业开发中需要频繁切换元素的显示与隐藏，推荐使用v-show否则使用v-if

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

<body>
    <div id ="app"> 
        <!-- <p v-show="show">哈哈哈</p>
        <p v-show="hidden">伤心，不让显示</p> -->

        <!-- <p v-show="true">哈哈哈</p>
        <p v-show="false">伤心，不让显示</p> -->

        <!-- <p v-show="age >= 18">哈哈哈</p>
        <p v-show="age<18">我是false</p>
         -->
        <p v-if="show">段落一</p>
        <p v-if="hidden">段落二</p>
        <p v-show="show">段落一</p>
        <p v-show="hidden">段落二</p>

    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            show:true,
            hidden:false,
            // 注意这里的true和false不要放到“”，这样就把布尔值转换成字符串
            age:19
        },
        methods: {}
     });
    </script>
</body>

</html>

v-for指令

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

<body>
    <div id ="app"> 
        <ul>
            <!-- <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <li>赵六</li> -->
            <!-- 遍历数组 -->
            <!-- <li v-for="(value,index) in list">{{index}}---{{value}}</li> -->
            <!-- 遍历字符串 -->
            <!-- <li v-for="(value,index) in 'ssjjfjjfjjfjj' ">{{index}}---{{value}}</li> -->
            <!-- 遍历数字  打印1-6-->
            <!-- <li v-for="(value,index) in 6 ">{{index}}---{{value}}</li> -->
            <!-- 遍历对象 -->
            <li v-for="(value,key) in obj ">{{key}}---{{value}}</li>
        </ul>

    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            list:["张三","李四","王五","赵六"],
            obj:{
                name:"zhangsan",
                age:34

            }
        },
        methods: {}
     });
    </script>
</body>

</html>

v-bind指令
1.什么是v-bind指令
在企业中想要给“元素”绑定数据，我们可以使用{{ }}，v-text,v-html三种方式
但是如果想要给“元素的属性：绑定数据，就必须使用v-bind,所以v-bind的作用是专门用于给”元素的属性“绑定数据的
2.v-bind格式
v-bind:属性名=”绑定的数据“
:属性名称=”绑定的数据(省略v-bind)
3.v-bind特点
赋值的数据可以是任意一个合法的js表达式
例如： :属性名=“age + 1”

<body>
    <div id ="app">
        <!-- <p>{{name}}</p>
        <p v-text="name"></p>
        <p v-html="name"></p> -->

        <!-- 现在想把name的值传给value -->
        <!--注意点：如果要给元素的属性绑定数据，那么是不能够使用插值语法的  -->
        <!-- <input type="text" value="{{name}}"> -->

        <!-- 注意点：虽然通过v-model可以将数据绑定到input标签的value属性上，但是v-model是有局限性的，v-model只能用于input、textarea、select
        但是企业开发中可能还需要给其他标签的属性绑定数据 -->
        <!-- <input type="text" v-model="name"> -->

        <input type="text" v-bind:value="name">
        <input type="text" :value="name">
        
        <input type="text" :value="age + 1"> <!-- 19 -->
        
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            name:"zhangsan111",age:18
        },
        methods: {}
     });
    </script>
</body>

4.v-bind指令的作用
v-bind指令给“任意标签”的“任意属性“绑定数据
对于大部分属性而言，只需要直接赋值即可，例如:value=“name”
但是对于class和style属性而言，格式比较特殊

5.v-bind 绑定类名格式
:class="['需要绑定类名‘，…]"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .size{
            font-size:40px;
        }
        .color{
            color:pink;
        }
        .bg{
            background-color: #244442;
        }
    </style>
</head>

<body>
    <div id ="app"> 
        <!-- 之前的写法 -->
        <!-- <p class="size color bg">我是段落</p> -->


        <p v-bind:class="size">我是段落</p>
        <!-- 
            展示效果：没有效果  
            注意点：如果需要通过v-bind给class绑定类名，那么不能直接赋值
            默认情况下v-bind会去model中查找数据，但是model中没有对应的类名，所以无效，所以不能直接赋值
         -->
        <p v-bind:class="[size]">我是段落</p>
        <!--  
            展示效果：没有效果  
            注意点：如果想让v-bind去style中查找类名，那么就必须把类名放到数组中
            但是放到数组中之后默认还是会去Model中查找
        -->
        <p v-bind:class="['size']">我是段落</p>
        <!-- 注意点：将类名放到数组中之后，还需要利用将类名包裹起来才回去style中查找-->
        <p v-bind:class="['size','color','bg']">我是段落</p>
        <!--多类名绑定 -->


        <!-- 
            注意点：
            如果是通过v-bind类绑定类名，那么在绑定的时候可以编写一个三目运算符来实现按需绑定
            这样的话，直接修改data中的flag属性值，就可以添加或者不添加类名
         -->
         <p :class="['size','color',flag?'bg':'']">我是段落</p>
         


        <!-- 注意点：如果是通过v-bind类绑定类名，那么在绑定的时候可以通过对象来决定是否需要绑定 -->
        <p :class="['size','color',{'bg':false}]">我是段落</p>
        
        <!-- 注意点：如果是通过v-bind类绑定类名，那么还可以使用model中的对象来替换数组 -->
        <p :class="obj">我是段落</p>
        
    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            flag:false
        },
        obj:{
            'size':true,
            'color':true,
            'bg':true
        },
        methods: {}
     });
    </script>
</body>

</html>

6.如何通过v-bind给style属性绑定数据

<body>
    <div id ="app">
        <!-- 之前写法 -->
        <p style = "color:red">我是段落</p>


        <!-- 注意点：和绑定类名一样，默认情况下v-bind会去model中查找，找不到所以没有效果 -->
        <!-- <p :style="color:red">我是段落</p> -->

        <!-- 我们只需要将样式代码放到对象中赋值给style即可，但是取值必须用引号括起来 -->
        <p :style="{color:'red'}">我是段落</p>

        <!-- 注意点，如果样式名称带—,那么也必须用引号括起来才可以 -->
        <p :style="{color:'red','font-size':'100px'}">我是段落</p>

        <p :style="obj">我是段落</p>
<!-- 注意点：如果Model中保存了多个样式的对象，想将多个对象都绑定给style,那么可以将多个对象放到数组中赋值给style即可-->
        <p :style="[obj1,obj2]">我是段落</p>



    </div>

    <script>
     //创建Vue实例,得到 ViewModel
     var vm = new Vue({
        el: '#app',
        data: {
            obj1: {
                "color": "blue",
                "font-size": "100px"
            },
            obj2: {
                "background-color": "red"
            },
        }, 
        methods: {}
     });
    </script>
</body>

赵云0726

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
v-show指令、v-if指令、v-for指令、v-bind指令

v-show和v-if相同点：都是条件渲染，取值为true就显示，取值为false就不显示。区别：v-if：只要取值为false就不会创建元素。v-show：哪怕取值为false也会创建元素，只是如果取值是false会设置元素的display为nonev-if和v-show应用场景由于取值为false时v-if不会创建元素，所以如果需要切换元素的显示与隐藏，每次v-if都会创建和删除元素。由于取值为false时v-show会创建元素并设置display为none,所以如果需要切换元素的显示与
复制链接

扫一扫