Vue基础语法事件绑定:v-on: v-if: v-for: (四)

满脑子技术的前端工程师

已于 2023-01-29 21:27:23 修改

阅读量1k

点赞数

分类专栏： VUE 文章标签： vue.js 前端框架前端 javascript

于 2021-12-02 22:30:00 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/121664093

版权

VUE 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
一、事件绑定 v-on:
二、事件绑定 v-if v-else v-show:
二、事件绑定 v-for:

一、事件绑定 v-on:

<div id="app">
     //   <!-- 1.绑定的时候不带(),默认把事件对象传递到函数中,第一个参数是事件对象 -->
        <button @click=f1>通过v-on进行事件绑定</button>
       // <!-- 2.传递参数,如果想把事件对象传递过去,可以把$event作为事件对象传递进去-->
        <button @click=f1($event,30)>事件绑定传递参数</button>

     //  <!-- 3.传参,修改值 -->
        <button @click=f2($event,20)>事件绑定,即传递事件对象,也传递参数:{{name}}-{{age}}</button>
       // <!-- 4.声明成也给箭头函数 -->
        <button @keydown=f4($event)>事件函数是一个箭头函数</button>
       // <!-- 5.获取焦点 -->
        <input type="text" @focus=f5 @blur=f6></input>
    </div>
    
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    //如果组件对象中有el配置,这个组件是根组件,一个项目中只有一个根组件.根组件中通过data配置,是一个对象类型.
    //创建一个组件对象
    var app = new Vue({
        //渲染的位置,vue对象和模板进行关联
        el: "#app",
        //数据(data中的数据都具有响应式的效果)
        data: {
            name: '张三',
            age: 10,

        },
        //定义方法
        methods: {
            //添加模板里面使用的函数
            f1(e, a = 10) {
                console.log(a);
                console.log(e);
                // console.log(event); //内置的事件对象
                console.log(this); //组件实例对象
            },
            f2(e, a) {
                console.log('我是e' + e);
                console.log('我是a' + a);
                //带下划线的属性,一般都是隐藏属性
                console.log('我是_data中的name:' + this.name); //不推荐
                console.log('我是data中的name:' + this.name); //推荐
                this.age += 2
            },
            f4: (e) => {
                //传递过来的事件
                console.log(e);
                //this是window
                console.log(this.name);
            },
            f5(e) {
                console.log('我是focus' + e);
                e.target.style.backgroundColor = 'red'

            },
            f6(e) {
                console.log("我是bulr" + e);
                e.target.style.backgroundColor = ''
            }
        },

    })
</script>

二、事件绑定 v-if v-else v-show:

<body>
    <div id="app">
        <!-- 如果通过v-if进行元素的创建与隐藏,显示的时候是创建,隐藏是元素删除,一般一些频繁操作的组件,(不推荐使用v-if. 重复创建和删除导致页面的性能降低).
             vue里面对v-if进行处理,如果删除一个组件,会把组件进行缓存,如果再次通过v-if显示(创建),
             会从缓存中取出再显示,通过从缓存中找到删除的组件的方式,提高效率
         -->
        <p v-if=show>我是v-if:是条件渲染指令,如果是v-if为true,该标签就会显示</p>
        <p v-else>我是v-else:与v-if条件是相反的,v-else成立,该标签就显示 </p>
        <button @click=changeShow>点击切换显示</button>
        <hr>
        <input type="text" v-model:value='score'>
        <p v-if="score>=90 && score<=100">优秀</p>
        <p v-if="score>=80 && score<90">良好</p>
        <p v-if="score>=60 && score<80">及格</p>
        <p v-if="score<60">不及格</p>

        <hr>
        <!-- 三元运算 -->
        <p>{{show ? '男' : "女"}}</p>
        <!--  -->
        <p v-if='show'>是否显示</p>
        <!-- 通过计算属性 -->
        <!-- <p>{{Sex}}</p> -->
        <hr>

        <p v-show="show">v-show显示和隐藏组件的指令,通过css样式display=none/block进行元素的显示和隐藏</p>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    //如果组件对象中有el配置,这个组件是根组件,一个项目中只有一个根组件.根组件中通过data配置,是一个对象类型.
    //创建一个组件对象
    var app = new Vue({
        //渲染的位置,vue对象和模板进行关联
        el: "#app",
        //数据(data中的数据都具有响应式的效果)
        data: {
            show: true,
            score: 99,
        },
        computed: {
            Sex() {
                return this.show ? '男' : "女"
            }
        },
        methods: {
            //改变show的值
            changeShow() {
                this.show = !this.show
            },

        },

    })
</script>

二、事件绑定 v-for:

body>
    <div id="app">
        <!-- v-for 循环指令 可以对数组进行循环,参数不能更换位置(n表示遍历的元素,i表示索引值) 
             :key是v-for的唯一标识,在循环渲染的时候,一般需要把key属性进行设置,属性不能一样
             在更新组件可以根据key值找到要更新的组件,从而提升页面渲染的速率
        -->
        <p v-for="(n,i) in books" :key="n.id">{{i}}-------{{n}}-------{{n.id}}-{{n.name}}-{{n.price}}-{{n.count}}</p>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    //如果组件对象中有el配置,这个组件是根组件,一个项目中只有一个根组件.根组件中通过data配置,是一个对象类型.
    //创建一个组件对象
    var app = new Vue({
        //渲染的位置,vue对象和模板进行关联
        el: "#app",
        //数据(data中的数据都具有响应式的效果)
        data: {
            books: [{
                id: 1,
                name: 'vue从入门到放弃',
                price: 1000,
                count: 200
            }, {
                id: 2,
                name: 'python从入门到放弃',
                price: 2000,
                count: 500
            }, {
                id: 3,
                name: 'java从入门到放弃',
                price: 280,
                count: 290
            }]
        },
    })
</script>