方法和事件绑定、样式绑定、条件和循环渲染

最新推荐文章于 2024-07-25 09:24:40 发布

Y636

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量99

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_56464670/article/details/126615673

版权

一、方法和事件绑定

1、方法的写法：在methods中写方法，供事件或者别的方法内部调用

2、事件绑定：v-on: 和 @ 都是绑定事件的指令，指令后面跟事件类型，值就是methds中的方法，可以加小括号也可以不加

3、事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

.prevent 阻止默认事件

.capture 添加事件侦听器时让事件在捕获阶段触发

.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素

.once 事件只触发一次,触发完之后,事件就解绑

多修饰符一起使用:连点

<div class="box">
        <div class="son1" @mouseenter="fn1" @click.capture="fn1" @mouseleave="fn2">{{first}}
            <div class="son2" @click.stop="fn2">{{second}}
                <div class="son3" @click.self.stop="fn3">{{third}}</div>
            </div>
        </div>
        <div @click.once="fn4">  //图片只能点击一次
            <img :src="img" alt="">
        </div>
        <a :href="lianjie" class="imgbox" @click.prevent>
            <img :src="img" alt="">
        </a>
    </div>

    <script>
        new Vue({
            el: ".box",
            data: {
                first: "最外层",
                second: "内层",
                third: "最里层",
                flag: false,
                lianjie: "http://www.baidu.com",
                img: "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550"
            },
            methods: {
                fn1() {
                    console.log("最外层")
                },
                fn2() {
                    this.second = "最外层"
                    this.first = "失效"
                    console.log("内层")
                },
                fn4() {
                    this.flag = !this.flag
                    if (this.flag) {
                        this.img =
                            "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/1cbc69a6-d001-4d53-87a9-efb4174c8645.jpg@!550"
                    } else {
                        this.img =
                            "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550"
                    }
                    console.log("只执行一次")
                },
                fn3() {
                    console.log("最里层")
                    this.fn4()
                }
            }
        })
    </script>

二、样式绑定

(1)对style 进行绑定

当页面中有某一些样式需要动态改变时用style绑定

<div class="box">
        <button @click="btnclicked" :style="[styleobj,{color:color,borderColor: 'rgb(238, 103, 218)', borderRadius: '26%'}]">{{title}}</button>
        <img v-bind:src="img" :style="{width:'200px',height:'300px',marginLeft:'100px'}">
    </div>

    <script>
        new Vue({
            el:".box",
            data:{
                title:"春天",
                img:"https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550",
                styleobj:{
                    position:"fixed",
                    top:"20px",
                    backgroundColor:"greenyellow",
                    width:"80px",
                    height:"40px"
                },
                color:"blue"
            },methods: {
                btnclicked(){
                    this.flag=!this.flag
                    if(this.flag){
                        this.title="夏天"
                        this.styleobj.backgroundColor="pink"
                        this.img="https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/1cbc69a6-d001-4d53-87a9-efb4174c8645.jpg@!550"
                    }else{
                        this.img="https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550",
                        this.title="春天"
                        this.styleobj.backgroundColor="greenyellow"
                    }
                }
            },
        })
    </script>

(2) 对class 属性进行绑定

对象语法：v-bind:class 指令也可以与普通的 class 属性共存

数组语法：v-bind:class="['固定类名',变量名]"

<div class="box">
        <div :class="{mainbox:true,one:pan}">
            <button @click="btnclick">{{title}}</button>
            <div :class="['btn',btn2]">
                {{shi}}
            </div>
            <img :src="img" alt="">

        </div>
    </div>

    <script>
        new Vue({
            el: ".box",
            data: {
                title: "背景1",
                pan:true,
                shi:`少无适俗韵，性本爱丘山。
                误落尘网中，一去三十年。(误落 一作：误入)
                羁鸟恋旧林，池鱼思故渊。
                开荒南野际，守拙归园田。
                方宅十余亩，草屋八九间。
                榆柳荫后檐，桃李罗堂前。
                暧暧远人村，依依墟里烟。
                狗吠深巷中，鸡鸣桑树颠。(颠 通 巅)
                户庭无尘杂，虚室有余闲。
                久在樊笼里，复得返自然。`,
                mode: "one",
                btn2: "first",
                img: "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550"
            },
            methods: {
                btnclick() {
                    this.flag = !this.flag
                    if (this.flag) {
                        this.mode = "two"
                        this.btn2 = "second"
                        this.img =
                            "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/1cbc69a6-d001-4d53-87a9-efb4174c8645.jpg@!550"
                    } else {
                        this.mode = "one"
                        this.btn2 = "first"
                        this.img =
                            "https://cdn-hz.skypixel.com/uploads/cn_files/photo/image/517a04c2-420e-413c-b3ca-840a099faa29.JPG@!550"
                    }
                }
            },
        })
    </script>

三、条件渲染

v-if、v-show

v-if：移除元素来切换模块，具有更高的渲染消耗，因为常常用在不常切换的业务

v-show：css的隐藏元素(display:none)切换模块，具有更高的内存消耗，用于经常切换的业务

<div class="box">
        <button @click="fn">{{title}}</button>
        <div v-text="one" v-if="flag" @click="fn2">
        </div>
        <pre v-show="flag2">{{n1}}</pre>
        <div v-text="two" v-if="flag" @click="fn3">
        </div>
        <pre v-show="flag3">{{n2}}</pre>

    </div>

    <script>
        new Vue({
            el: ".box",
            data: {
                flag: false,
                flag2: false,
                flag3: false,
                title: "展示",
                one: "元日（点击显示内容）",
                two: "长歌行（点击显示内容）",
                n1: `爆竹声中一岁除，春风送暖入屠苏。
千门万户曈曈日，总把新桃换旧符。`,
                n2: `青青园中葵，朝露待日晞。
阳春布德泽，万物生光辉。
常恐秋节至，焜黄华叶衰。
百川东到海，何时复西归？
少壮不努力，老大徒伤悲!`
            },
            methods: {
                fn() {
                    this.flag = !this.flag
                    if(this.flag){
                        this.title="收起"
                    }else{
                        this.title="展示"
                    }
                },
                fn2() {
                    this.flag2 = !this.flag2
                },
                fn3() {
                    this.flag3 = !this.flag3
                }

            },
        })
    </script>

四、循环渲染

v-for

在Vue2.0中v-if和v-for 写到一个元素中，v-for的优先级更高

怎样是v-for降级：（1）写成嵌套元素 (2)使用Vue专有的template标签

在Vue3.0中，v-if和v-for写在一起会直接报错

<div class="box">
            <div v-for="el in arr">
                <h3 :style="{width:'300px',background:'yellowgreen'}">{{el.writer}}</h3>
                <template v-for="el2 in el.books">
                    <template v-if="el2.price>50">
                        <li :style="{fontWeight:'900',listStyle:'none',marginTop:'20px'}">{{el2.name}}</li>
                        <i :style="{fontSize:'12px'}">价格：{{el2.price}}</i>
                    </template>
                </template>
                <p :style="{fontSize:'13px',width:'300px',background:'pink'}">{{el.site}}</p>
            </div>
        </div>