条件判断，循环遍历，响应式

最新推荐文章于 2024-06-14 11:01:38 发布

33的史努比

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量79

点赞数

分类专栏：前端入门学习文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/coising/article/details/123160005

版权

前端入门学习专栏收录该内容

88 篇文章 0 订阅

订阅专栏

条件判断

v-if当条件为false时，包含v-if的元素根本不会存在于dom中
v-show 当条件为false时，只是给元素增加一个行内样式display：none

循环遍历

v-for 遍历对象数组类似

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- 遍历对象中，若只获取一个值获取的是value -->
        <ul>
            <li v-for="item in info">{{item}}</li>
        </ul>
        <!-- 获取key value -->
        <ul>
            <li v-for="(value,key,index) in info">
                {{value}}-{{key}}-{{index}}
            </li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
            info :{
                name : 'ee',
                age :14,
                height : 111
            }
            }
        })


    </script>
</body>
</html>

响应式

可以做到响应式的：
push 数组最后面添加元素
pop 删除最后一个
shift 删除第一个元素
unshift 在数组最前面添加元素

splice:

删除元素，第二个参数传要删除几个元素，不传则后面全部删除
替换元素第二个元素表示要替换几个元素，之后的参数则为用来替换原有的元素
插入元素第二个参数传入0，后面跟上要插入的元素

sort() 排序
reverse（）

通过索引改变元素不是响应式的，但是可以用splice实现，或者：

    Vue.set(this.letters,0,'eee')

33的史努比

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
条件判断，循环遍历，响应式

条件判断v-if当条件为false时，包含v-if的元素根本不会存在于dom中v-show 当条件为false时，只是给元素增加一个行内样式display：none循环遍历v-for 遍历对象数组类似<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
复制链接

扫一扫