Vue2学习笔记：2

HHHUHHH10

于 2024-08-05 20:15:30 发布

阅读量361

点赞数 8

文章标签：学习笔记前端

本文链接：https://blog.csdn.net/m0_65365393/article/details/140934977

版权

指令式语法

v-text指令：展示纯文本，相当于JS中的innerText

v-html指令：展示文本及样式，相当于JS中的innerHTML

 let vm=new Vue({   
     data(){
        return{
            str:"<h2>这是vue中的数据</h2>"
        }
    }
    })
    vm.$mount("#app")
</script>

<div id="app">
        <div v-text="str"></div>
        <div v-html="str"></div>
</div>

我们可以看到在使用v-text指令的div中是将str以纯文本的方式展示，而使用v-html的div是将HTML解析后展示。

v-show和v-if指令的区别

v-show和v-if都是控制元素的显示和隐藏，但是他俩却有很大的区别

v-show：是在CSS层面控制的显示和隐藏，当状态为false时，元素隐藏，但只是相当于在该元素上加上了display：none属性。

v-if：在渲染时选择是否渲染，当状态为false时，元素不渲染，为true时元素渲染，所以当该元素需要频繁切换显示和隐藏状态时，会造成资源浪费

使用v-show

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-show="strIsShow">{{str}}</div>
    </div>
</body>
<script src="../vue.min.js"></script>
<script>
    let vm = new Vue({
        data() {
            return {
                str: "在在在在在在在在在在在在在在",
                strIsShow: false
            }
        }
    })

    vm.$mount("#app")
</script>

</html>

运行后查看开发者工具

发现被使用v-show的元素被加上了display：none，也就是说这个元素还在。

使用v-if

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div v-if="strIsShow">{{str}}</div>
    </div>
</body>
<script src="../vue.min.js"></script>
<script>
    let vm = new Vue({
        data() {
            return {
                str: "在在在在在在在在在在在在在在",
                strIsShow: false
            }
        }
    })

    vm.$mount("#app")
</script>

</html>

运行后打开开发者工具

我们发现，被v-if指令修饰的元素并没有被渲染

v-if条件判断

v-if也可以当做条件判断来使用，配合着v-else-if、v-else

和java中if、else if 、else使用的方法是一致的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="money>=1000000 && money<2000000">give u 1000</div>
        <div v-else-if="money>=2000000 && money<3000000">give u 2000</div>
        <div v-else-if="money>=3000000 && money">give u 3000</div>
        <div v-else>nothing</div>
    </div>
</body>
<script src="../vue.min.js"></script>
<script>
    let vm=new Vue({
        data(){
            return{
                money:1000000
            }
        }
    })

    vm.$mount("#app")
</script>
</html>

上面的例子中money=1000000，所以掉入第一个选项，返回give u 1000

v-bind

单向绑定数据（动态绑定数据）

我们先创造好实例：

<script src="../vue.min.js"></script>
<script>
    let vm = new Vue({
        data(){
            return{
                str:"这是一个div",
                aLink:"https://www.baidu.com",
                path:"../img/606b810a2b8961edf94e4d3d939f6ad3.png",
                bol:true
            }
        }
    })

    vm.$mount("#app")
</script>

a链接的绑定

<a v-bind:href="aLink">点点点点点</a>

运行后查看

点击即可跳转百度

图片绑定

        <img :src="path" alt="" style="width:200px;">

也能成功解析本地的图片文件

动态样式绑定

style

<style>
    .bg{
        background-color: aqua;
    }
</style>

未绑定时

<div>{{str}}</div>

绑定后

<div :class="{bg:bol}">{{str}}</div>

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .bg{
        background-color: aqua;
    }
</style>
<body>
    <div id="app">

        <a v-bind:href="aLink">点点点点点</a>
        <hr>
        <img :src="path" alt="" style="width:200px;">
        <hr>
        <div :class="{bg:bol}">{{str}}</div>
    </div>
</body>
<script src="../vue.min.js"></script>
<script>
    let vm = new Vue({
        data(){
            return{
                str:"这是一个div",
                aLink:"https://www.baidu.com",
                path:"../img/606b810a2b8961edf94e4d3d939f6ad3.png",
                bol:true
            }
        }
    })

    vm.$mount("#app")
</script>
</html>

v-for

可以循环遍历数字、字符串、数组、对象等

在遍历字符串和数组时，也可获得其下标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <h2>循环遍数字</h2>
            <div v-for="item in num">{{item}}</div>
            <h2>循环遍历字符串</h2>
            <div v-for="(item,index) in str ">{{item}}----\>{{index}}</div>
            <h2>循环遍历数组</h2>
            <div v-for="(item,index) in arr ">{{item}}----\>{{index}}</div>
            <h2>循环遍历对象</h2>
            <div v-for="(item,key) in obj ">{{item}}----\>{{key}}</div>
            <h2><hr></h2>
            
        </div>
    </div>
</body>
<script src="../vue.min.js"></script>
<script>
    let vm= new Vue({
        data(){
            return{
                num:10,
                str:"JavaScript",
                arr:["元素1","元素2","元素3","元素4","元素5"],
                obj:{
                    uname:"张三",
                    arg:18
                }
            }
        }
    })

    vm.$mount("#app")
</script>
</html>

结果

v-if和v-for的优先级

v-for的优先级更高，如果v-for和v-if一起搭配使用时，将v-if放在父元素上

HHHUHHH10

关注

8
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记：2

v-text指令：展示纯文本，相当于JS中的innerTextv-html指令：展示文本及样式，相当于JS中的innerHTML我们可以看到在使用v-text指令的div中是将str以纯文本的方式展示，而使用v-html的div是将HTML解析后展示。
复制链接

扫一扫