【vue-2】v-on、v-show、v-if及按键修饰符

news2024/10/5 12:52:11

1、v-on事件

2、按键修饰符

3、显示和隐藏v-show

4、条件渲染v-if

1、v-on事件

创建button按钮有以下两种方式：

<button v-on:click="edit">修改</button>

<button @click="edit">修改</button>

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ msg }}
        <h1>{{web.title}}</h1>
        <h2>{{web.url}}</h2>
        <h1>{{number}}</h1>
        <button v-on:click="edit">修改</button>
    </div>
    <script type="module">
        import {createApp, reactive, ref} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){
                const number = ref(10)
                number.value = 20
                const web = reactive({
                    title:"开始学习vue啦",
                    url:"vue.com"
                })
                const edit = () =>{
                    web.url = "hhahaha"
                }
                return{
                    msg:"sucess",
                    web,
                    number,
                    edit
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

另：=>是es6中的语法。

举例说明：

（x）=> x + 6

相当于

function(x){
    return x+6;
}

2、按键修饰符

回车：

回车 <input type="text" @keyup.enter="add(20,50)"> <br>

空格：

空格 <input type="text" @keyup.space="add(10,80)"> <br>

Tab键：

Tab <input type="text" @keydown.tab="add(5,32)"> <br>

按键盘w键：

w <input type="text" @keyup.w="add(8,3)"> <br>

组合键：

Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>
Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br>

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> -->
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{ msg }}
        <h1>{{web.title}}</h1>
        <h2>{{web.url}}</h2> 
        <h2>{{web.user}}</h2>
        回车 <input type="text" @keyup.enter="add(20,50)"> <br>
        空格 <input type="text" @keyup.space="add(10,80)"> <br>
        Tab <input type="text" @keydown.tab="add(5,32)"> <br>
        w <input type="text" @keyup.w="add(8,3)"> <br>
        <!-- 组合键 -->
        Ctrl+Enter <input type="text" @keyup.ctrl.enter="add(20,50)"> <br>
        Ctrl+A <input type="text" @keyup.ctrl.a="add(20,50)"> <br>
    </div>
    <script type="module">
        import {createApp, reactive} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){
                
                const web = reactive({
                    title:"开始学习vue啦",
                    url:"vue.com",
                    user:0
                })
                
                const add = (a,b) =>{
                    web.user += a+b
                }
                
                return{
                    msg:"sucess",
                    web,
                    add
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

3、显示和隐藏v-show

实现的功能：当web.title为False，隐藏内容；当为True，显示内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> -->
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <h1>{{web.title}}</h1>
        <p v-show="web.title">显示的内容</p>
        <button @click="show">切换显示状态</button>
    </div>
    <script type="module">
        import {createApp, reactive} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){ 
                const web = reactive({
                    title:false
                })
                const show = () => {
                    web.title = !web.title
                }
                return{
                    web,
                    show
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>

4、条件渲染v-if

通过v-if也可实现上述功能，当v-if为True，显示内容，当为False，则不显示，只需在上述代码添加以下一行代码即可。

<p v-if="web.title">v-if显示的内容</p>

实现的功能：当web.user在不同数值段，显示不同的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="vue.global.js"></script> -->
</head>
<body>
    <div id="app">
        <!-- 插值表达式 -->
        <p v-if="web.user < 1000">user小于1000</p>
        <p v-else-if="web.user > 1000 && web.user < 2000">user小于2000</p>
        <p v-else>user大于2000</p>
    </div>
    <script type="module">
        import {createApp, reactive} from './vue.esm-browser.js'
        // const {createApp, reactive} = Vue
        createApp({
            // setup选项，用于设置响应式数据和方法等
            setup(){ 
                const web = reactive({
                    user:500
                })
                
                return{
                    web     
                }
            }
        }).mount("#app")
        // mount为挂载
    </script>
</body>
</html>