0
点赞
收藏
分享

微信扫一扫

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

幺幺零 2022-02-27 阅读 96

条件判断

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:

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

sort() 排序
reverse()

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

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

相关推荐

0 条评论