Vue.js----入门 (4)----条件语句、循环语句、计算属性

最新推荐文章于 2024-09-14 18:52:56 发布

Nan YI I

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量376

点赞数 1

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_41918166/article/details/112274139

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、条件语句
- v-if、v-else、v-else-if 指令
二、循环语句
- 循环使用 v-for 指令
三、计算属性

一、条件语句

v-if、v-else、v-else-if 指令

条件判断使用 v-if 指令,用 v-else 指令给 v-if 添加一个 “else” 块,用 v-else 指令给 v-if 添加一个 “else” 块.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <!--  1:传统使用-->

    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
    <!--computed计算属性-->
    <h2>{{result}}</h2>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 99
        }
    })
</script>
</body>
</html>

二、循环语句

循环使用 v-for 指令

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
1、v-for遍历数组

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <!--  1: 在遍历的过程中没有使用索引值(下标值)-->
    <ul>
        <li v-for="item in names">{{item}}</li>
    </ul>
    <!--  2: 在遍历的过程中获取索引值(下标值)：两种写法-->
    <ul>
        <li v-for="(item,index) in names">{{index + 1}}---{{item}}</li>
        <li v-for="item,index in names">{{index + 1}}---{{item}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            names: ['why', 'kobe', 'james']
        }
    })
</script>
</body>
</html>

2、v-for遍历对象
可以获取的对象的vlaue、对象的key、对象的索引index

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <!--  1: 在遍历对象的过程中如果只获取一个值，获取到的是value-->
    <ul>
        <li v-for="item in student">{{item}}</li>
    </ul>
    <!--  2: 在遍历的过程中获取key与value--(value,key),顺序不能变-->
    <ul>
        <li v-for="(value,key) in student">{{key}}---{{value}}</li>
    </ul>
    <!--  3: 在遍历的过程中获取key与value与index--(value,key,index),顺序不能变-->
    <ul>
        <li v-for="(value,key,index) in student">{{index + 1}}-{key}}-{{value}}</li>
    </ul>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            student: {
                name: '李四',
                age: 18,
                sex: '男'
            }
        }
    })
</script>
</body>
</html>

注意：案例中的顺序不能改变，必须按照案例中的顺序写。
3、v-for响应式性能

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Vue案例--南一小宝宝啊</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <!--  1: 在遍历的过程中没有使用索引值(下标值),加上：key可以提高性能-->
    <ul>
        <li v-for="item in names" :key="item">{{item}}</li>
        <button @click="btnClick">按钮</button>
    </ul>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                names: ['a', 'b', 'c']
            },
            methods: {
                btnClick() {
                    //  1.push方法,里面可以写多个值push('aa','bb')
                    this.names.push('aa');
                    //  2.pop()删除最后一个元素
                    this.names.pop();
                    //  3.shift()删除第一个元素
                    this.names.shift();
                    //  3.unshift()在数组最前面添加元素,里面可以写多个值
                    this.names.unshift('cc');
                    //  4.splice()删除元素/插入元素/替换元素
                    //  删除元素:第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素
                    //  替换元素:第二个参数，表示我们要替换几个元素，后面是用于替换前面的元素
                    //  插入元素:第二个参数，传入0，并且后面跟上要插入的元素
                    this.names.splice()
                    //  5.sort()排序
                    this.names.sort()
                    //  6.reverse(),将数组元素反转
                    this.names.reverse()
                    //  注意：通过索引值修改数据不是响应式的
                    //  this.names[0].push('bbb')
                    //  可以通过替换来代替
                    this.names.splice(0, 1, 'bbb')
                    //  也可以通过Vue的内部方法set()实现
                    //  set(要修改的对象名字，索引值，修改后的值域)
                    Vue.set(this.names, 0, 'bbb')
                }
            }
        })
    </script>
</body>
</html>

三、计算属性

1、计算属性关键词: computed,计算属性在处理一些复杂逻辑时是很有用的。可以看下以下字符串拼接和字符串反转的例子：

<!DOCTYPE HTML>
<html lang="zn">

<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>Vue案例--南一小宝宝啊</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
<div id="app">
    <!--    模板语言表达式-->
    <p>{{firstname + lastname}}</p>
    <!--    使用计算属性-->
    <p>{{fullname}}</p>
    <!--    使用模板表达式逆序显示字符串-->
    <p>{{word.split("").reverse().join("")}}</p>
    <!--    使用计算属性-->
    <p>{{reverseWord}}</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            firstname: '张三',
            lastname: '李四',
            word: "music"
        },
        computed: {
            fullname: function () {
                //将结果进行缓存
                return this.firstname + this.lastname
            },
            reverseWord: function () {
                return this.word.split("").reverse().join("")
            }
        }
    })
</script>
</body>
</html>

注意：由上面案例可以看出，反转字符串的时候，使用模板表达式显得不易理解而且代码比较繁杂，当使用计算属性的时候反而显得清晰易懂，这就是计算属性的作用所在。

2、计算属性的set与get方法，不过计算属性一般没有set方法，即计算属性是只读属性

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Vue案例--南一小宝宝啊</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <p>{{getFullName()}}</p>
    <!--  使用计算属性的时候，不需要加()-->
    <p>{{fullName}}</p>
</div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            msg: 'hello!',
            firstName: '100px',
            lastName: 'red'
        },
        computed: {
            //简写(其实就是调用默认的get方法)
            fullName: function () {
                return this.firstName + this.lastName
            },
            //  完整写法
            fullName: {
                //计算属性一般没用set方法，即计算属性是只读属性
                set: function (newValue) {
                    //newValue这个值代表的是新传入的值
                    //  打印
                    console.log(newValue);
                    const names = newValue.split(' ');
                },
                get: function () {
                    return this.firstName + this.lastName;
                }
            }
        }
    })
</script>

</body>
</html>