Vue第一部分(3)：事件绑定与标签属性赋值

事件绑定：v-on指令5.1 基本使用在Vue中通过 v-on 指令给页面元素绑定事件。语法：

CSDN专家-微编程

3114人浏览 · 2021-08-13 06:58:24

CSDN专家-微编程 · 2021-08-13 06:58:24 发布

1.事件绑定：v-on指令

基本使用

在 Vue 中通过 v - on 指令给页面元素绑定事件。

语法：

v-on:事件名="js代码片段或函数" //事件名=事件属性-on  比如：click=onclick-on

//函数必须定义在Vue示例的methods属性中。
const vm = new Vue({
    el:"选择器",
  	methods:{
        //定义事件处理函数
        函数名:function(){
            //函数实现
        }
    }  
})

示例代码

<div id="app">
    <h1 v-if="show">
        <span style="color:green">show=true</span>
    </h1>
    <h1 v-else>
        <span style="color:red">show=false</span>
    </h1>
    <!-- 直接使用函数名即可 -->
    <button v-on:click="handleClick">点我</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            show:true
        },
        methods:{//注意事件处理函数必须定义在methods中
            handleClick:function(){
                this.show=!this.show;//data中的属性，在函数中可以直接this.访问
            }
        }
    })
</script>

事件绑定还有简写语法：

@事件名="js代码片段或函数"

const vm = new Vue({
    el:"选择器",
    methods:{
        //定义事件处理函数:直接定义函数，甚至无需function关键字
        函数名(){
            ...
        }
    }
})

示例代码

<div id="app">
    <h2>num={{num}}</h2>
    <!-- 事件处理函数代码简单时，可以直接在事件绑定处写代码 -->
    <button @click="num++">自增</button>
    <button @click="decrement">自减</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            /*
         
            increment:function(){
                this.num--;
            }*/
            //methods定义函数还可以有如下简写形式 函数名(){}
           
            increment(){
                this.num--;
            }
        }
    })
</script>

事件修饰符

在事件处理函数中调用 event.preventDefault() 禁用标签的默认行为或event.stopPropagation() 停止事件冒泡是非常常见的需求。

<div id="app">
    <a href="https://www.baidu.com" @click="handleClick">点我</a>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        methods:{
            handleClick(event){
                alert("被单击了");
                event.preventDefault();//禁用超链接的默认点击跳转
            }
        }
    })
</script>

尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡

.prevent ：阻止默认事件发生，比如超链接的默认跳转、表单的提交（重点）

.self ：只有元素自身触发事件才执行。（子元素的事件冒泡来的不执行）

.once ：只执行一次

<div id="app">
    <a href="https://www.baidu.com" @click.prevent="handleClick">点我</a>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        methods:{
            handleClick(event){
                alert("被单击了");
                // event.preventDefault();
            }
        }
    })
</script>

2.标签属性的赋值：v-bind指令

基本使用

有时，我们需要动态的修改标签的属性值，看如下需求：动态修改div的class属性值

<head>
    <style type="text/css">
        .red_bg{
            background-color: red;
        }
        .green_bg{
            background-color: green;
        }
    </style>
</head>
<body>
	<div id="app">
        <!-- 这里意图通过插值表达式动态获取class_name的值，但是失败了 -->
        <div class="{{class_name}}">点击按钮改变背景样式:{{class_name}}</div>
        <button @click="class_name='red_bg'">红色</button>
        <button @click="class_name='green_bg'">绿色</button>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                class_name:""
            }
        })
    </script>
</body>

无法直接在标签的属性中使用插值表达式动态的设置标签的属性值，这时候就需要使用v-bind指令。语法如下：

v-bind:属性名="Vue中的变量"

例如，在这里我们可以写成：

<div v-bind:class="class_name"></div>

不过，v-bind太麻烦，因此可以省略，直接写成: ，:属性名="属性值" ，即：

<div :class="color"></div>

完整示例

<head>
    <style type="text/css">
        .red_bg{
            background-color: red;
        }
        .green_bg{
            background-color: green;
        }
    </style>
</head>
<body>
    
     <div id="app">
         <div class="{{class_name}}">点击按钮改变背景样式:{{class_name}}</div>
         <div v-bind:class="class_name">点击按钮改变背景样式:{{class_name}}</div>
         <div :class="class_name">点击按钮改变背景样式:{{class_name}}</div>
         <button @click="class_name='red_bg'">红色</button>
         <button @click="class_name='green_bg'">绿色</button>
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                class_name:""
            }
        })
    </script>
</body>

绑定class属性的对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

<div id="app">
   
    <div v-bind:class="{red_bg:showRed,green_bg:!showRed}">点击按钮改变背景样式</div>
    <button @click="showRed=true">红色</button>
    <button @click="shoRed=false">绿色</button>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            showRed:true
        }
    })
</script>

v-for时的key属性

当我们需要更新 v-for 渲染过的元素列表时，比如向数组中添加一个新的元素。为了保证Vue正确并高效的渲染页面，官方建议我们为每项提供一个唯一 key 属性，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素。key一般使用在遍历完后，又增、减数组的元素的时候更有意义。

示例：

<ul>
    <li v-for="(item,index) in items" :key="index"></li>
</ul>

这里使用了属性赋值语法： :key="index"为每一个生成的元素设置一个唯一的key属性

这里绑定的key是数组的索引，应该是唯一的

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^