2、事件修饰符、双向绑定、style样式使用、v-for循环遍历、v-if 和 v-show

最新推荐文章于 2024-06-12 21:33:32 发布

@zyf哈哈哈哈

最新推荐文章于 2024-06-12 21:33:32 发布

阅读量523

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_58779986/article/details/136977607

版权

一、事件修饰符

1、.stop 阻止冒泡事件

给谁加了阻止冒泡事件，谁下面的盒子就不会执行了

<div id="app">
    <div class="parent" @click="log3">
        <div class="child" @click="log2">
            <button @click.stop="log1">我是按钮</button> // 输出1111
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            log1() { console.log(11111111111); },
            log2() { console.log(222222222222); },
            log3() { console.log(3333333333); }
        },
    })
</script>

2、.capture 添加事件捕获

给谁加捕获事件，谁先触发

<div id="app">
    <div class="parent" @click="log3">
        <div class="child" @click.capture="log2"> //先输出22222 然后 1111 33333
            <button @click="log1">我是按钮</button> 
        </div>
    </div>
    </div>

3 、.self 点击他的时候触发

只有在点击的时候才可以触发

<div id="app">
    <div class="parent" @click="log3">
    //点击2  触发222 333
        <div class="child" @click.self="log2">
            <button @click="log1">我是按钮</button>
            //点击1 触发 111 333
        </div>
    </div>
</div>

4、.once只触发一次

<div id="app">
    <div id="one" @click="one">
    <!-- 给two盒子的点击事件添加.once修饰符 -->
        <div id="two" @click.once="two">
            <div id="three" @click="three"></div>
        </div>
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            one() { console.log('单击one盒子了'); },
            two() { console.log('单击two盒子了'); },
            three() { console.log('单击three盒子了'); }
        }
    })
</script>

5、.prevent 阻止默认事件

<div id="app">
    <!-- 给链接标签的点击事件添加.prevent修饰符 -->
    <a href="#" @click.prevent="tap">点击链接</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            tap() {
                console.log('阻止默认事件');
            }
        }
    })
</script>

二、v-model 数据双向绑定（表单控件）

原理：通过数据劫持结合订阅模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
指令 v-model

<div id="app">
    <input type="text" v-model:value=first> + <input type="text" v-model:value=second> <button @click="add">=</button> <input type="text" v-model:value=result>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            first: '',
            second: '',
            result: ''
        },
        methods: {
            add() {
                // 获取到的input框的value值都是字符串类型
                this.result = Number(this.first) + Number(this.second)
            }
        }
    })
</script>

三、样式的使用

    <style>
        .red { color: red; }
        .fs30 { font-size: 30px; }
    </style>

1、class（4钟）

数组

<body>
    <div id="app">
        <div :class="[class1,class2]">字体30px、红色字</div>
        <!-- 等价于 -->
        <div class="red fs30">字体30px、红色字</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            class1: 'red',
            class2: 'fs30'
        },
        methods: {}
    })
</script>

三目表达式

<div id="app">
<!-- age=10 满足age<18 所以class=class1 -->
    <div :class="age<18?class1:class2">未成年人</div>
<!-- 等价于 -->
    <div :class="age<18?'red':'fs30'">未成年人</div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            age: 10,
            class1: 'red',
            class2: 'fs30'
        },
        methods: {}
    })
</script>

对象

<div id="app">
    <div :class="{red:true}">显示红色字体</div>
    <div :class="{'red':true}">显示红色字体</div>
    <div :class="{'red':flag}">显示红色字体</div>
    <div :class="{'red':'flag'}">显示红色字体</div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {}
    })
</script>

数组内置对象

<div id="app">
    <div :class="[{red:true},{fs30:flag}]">红色字体、字号30px</div>
    <div :class="[{'red':flag},{fs30:'flag'}]">红色字体、字号30px</div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {}
    })
</script>

2、style(3钟)

对象

    <div id="app">
        <div :style=style1>红色字体</div>
        <div :style=style2>字号30px、字体加粗</div>
    </div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            style1: 'color:red',
            style2: {
                fontSize: "30px",
                "font-weight": 700
            }
        },
        methods: {}
    })
</script>

数组内置对象

    <div id="app">
        <div :style='[style1,style2]'>红色字体、字号30px、字体加粗</div>
    </div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            style1: {
                'color': 'red'
            },
            style2: {
                fontSize: "30px",
                "font-weight": 700
            }
        },
        methods: {}
    })
</script>

函数返回值

<body>
    <div id="app">
        <div :style='getStyle()'>字号30px、字体红色</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {
            getStyle() {
                return {
                    color: 'red',
                    fontSize: "30px",
                }
            }
        }
    })
</script>

3、v-for

遍历数组

<body>
    <div id="app">
        <!-- item：数组的每一项   index：数组的索引（索引从0开始） -->
        <div v-for="(item,index) in list" :key="item">{{item}}</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            list: [ 1, 2, 3, 4 ]
        },
        methods: {}
    })
</script>

遍历对象

<body>
    <div id="app">
        <!-- value：值   key：键   index：索引 -->
        <div v-for="(value,key,index) in obj" :key="value">{{value}}</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            obj: {
                name1: '小明',
                name2: '小红',
                name3: '小花',
                name4: '小亮',
            }
        },
        methods: {}
    })
</script>

遍历数字

<div v-for="num in 10">{{num}}</div>

key
- 必须是唯一值
- 必须是数字或者字符串
- 作用：提高重排效率，就地复用

4、v-if 和 v-show

相同点：都可以进行元素的隐藏
不同点：
- v-if：通过删除DOM元素进行隐藏，v-show通过display:none;进行隐藏
应用场景：
- v-show：用于少次的切换，v-show应用于频繁的切换

<div id="app">
    <div v-if="isShow">v-if，变量为布尔值，为true才渲染Dom</div>
    <div v-show="isShow">v-show，变量为布尔值，为true才渲染Dom</div>
    <div v-if="false">v-if通过删除dom元素来实现</div>
    <div v-show="false">v-show是设置display:none来实现</div>
  <!-- v-if可以和v-else-if、v-else 一起结合使用，但是中间不能加dom内容 -->
	<!--   age=35，满足age<30 显示青年     -->
    <div v-if="age<18"> 少年</div>
    <div v-else-if="age<30"> 青年</div>
    <div v-else-if="age<60"> 中年</div>
    <div v-else> 老年</div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isShow: true,
            age: 35
        },
        methods: {}
    })
</script>