V-on的简单使用（VUE学习3）

一、v-on用于 标签来监听"click"事件

1.设置页面标题

2.将Vue应用程序挂载到具有id="app"的div元素上

3.包含一个具有id="lightDiv"的div元素，其中包含一个v-show指令和一个图像元素，

4.使用v-show指令根据lightOn的值来动态显示或隐藏元素，并显示一个表示灯泡的图像

5.包含一个按钮元素，使用v-on指令监听点击事件，并执行切换lightOn状态的操作

Switch light

6.引入 Vue.js 的全局脚本

7.创建 Vue 应用程序

const app=Vue.createApp({})

8.定义数据对象，这里包含一个名为lightOn的属性，初始值为false

data() {
                return {
                    lightOn: false
                }
            }

9.完整代码：

    


    

        

            

            
        
        Switch light
    
    
    
    

二、v-on计算输入文本字段的击键次数

1.含一个input元素，使用v-on指令监听input事件，每次触发事件时将inpCount加一，并显示一个段落元素，显示输入事件发生的次数

{{'Input events occured: ' + inpCount}}

2.创建 Vue 应用程序

const app=Vue.createApp({})

3.定义数据对象，这里包含一个名为inpCount的属性，初始值为0

data(){
                return {
                    inpCount:0
                }
            }

4.将 Vue 应用程序挂载到页面上的 #app 元素

app.mount('#app')

5.完整代码：

    


    

        
        
{{'Input events occured: ' + inpCount}}
    
    
    

6.运行结果：

三、使用v-on:mousemove在鼠标指针移动到元素上时执行操作

1.显示一段提示文本，告诉用户移动鼠标指针到下面的方框上

Move the mouse pointer over the box below

2.包含一个div元素，使用v-on指令监听mousemove事件，并使用v-bind指令动态设置背景颜色，颜色值根据colorVal计算得到

3.创建 Vue 应用程序

const app=Vue.createApp({})

4.定义数据对象，这里包含一个名为colorVal的属性，初始值为50

data() {
                return {
                    colorVal: 50
                }
            }

5.将 Vue 应用程序挂载到页面上的 #app 元素

app.mount('#app')

6.完整代码：

    


    

        
Move the mouse pointer over the box below