第7讲：v-bind属性绑定,v-model双向绑定,v-on事件监听使用

CSDN专家-赖老师（软件之家）

已于 2023-09-26 14:59:41 修改

阅读量494

点赞数

分类专栏： Vue+ElementUI学习笔记文章标签：前端

于 2023-09-26 14:33:22 首次发布

本文链接：https://blog.csdn.net/software7503/article/details/133296304

版权

Vue+ElementUI学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一.v-bind双向绑定

1.v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），Vue官方提供了一个简写方式 :bind，例如：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2.v-bind 主要用于属性绑定，比方你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。

示例

<img v-bind:src="imageSrc">

<img :src="imageSrc">

<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

代码示例1

    <div id="demo">
        <a  href="#" v-bind:href="url">
            <img v-bind:class="c" src="logo.png" alt="">
        </a>
    </div>
    <script>
        var app=new Vue({
            el:'#demo',
            data:{
                url:'http://www.qq.com',
                c:'myred'
            }
        });
    </script>

代码示例2

        <div id="box"> 
			<img v-bind:src="url" :width='w'/>
			<img :src="url" :width='w'/>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#box',
				data: {
				   url:'logo.png',
				   w:'100px'
				}
			})
		</script>

3.绑定 HTML Class

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

对象语法

<div id="app" v-bind:class="{active: isActive}">
    你好
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true
        }
    });
</script>

数组语法

<div id="app" v-bind:class="[activeClass, dangerClass]">
    v-bind
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">测试</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    });
</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰

<div id="app">
    <div v-bind:style="styleObject">测试效果</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleObject: {
                 color: 'red',
                 fontSize: '13px'
            }
        }
    });
</script>

二.v-model双向绑定

v-model一般用于数据的双向绑定（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 <input> 及 <textarea> 让表单元素和数据实现双向绑定（映射关系）,它会根据控件类型自动选取正确的方法来更新元素。

v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化

v-model 指令的基本使用

<div id="app">    
    <input type="text" v-model="msg">{{msg}}
</div>
<script>    
    var vm = new Vue({        
        el: '#app',        
        data: {            
            msg: 'hello world'        
        }    
    })
</script>

示例说明:

当修改数据msg里的内容, input输入框中的内容就会发生改变.

当修改输入框中的内容时,数据也会自动发生变化

关于checkbox

对于不能输入内容的表单,比如多选按钮,如果只有一个,或者有多个,v-model指令会有如何显示

checkbox上使用v-model

如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,

选中就是true,不选择就是false

<template>
    <div id="app">    
        <input type="checkbox" v-model="val">{{val}}    <!--true  或者  false-->
    </div>
</template>
<script>    
    export default({
        name: 'ModelDemo',     
        data: {            
            val: '',        
        },    
    })
</script>

checkbox上使用v-model绑定数组

<div id="app">    
    <input type="checkbox" v-model="val" value='小明'>    
    <input type="checkbox" v-model="val" value='小红'>    
    <input type="checkbox" v-model="val" value='张三'>{{val}}
</div>
<script>    
    var vm = new Vue({           
        el: '#app',        
        data: {            
            val: [],        
        },    
    })
</script>

三.v-on事件绑定

v-on 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：

<a v-on:click=”clickHandle”>clickHandle test</a>

clickHandle 为 Vue 组件对象中的一个属性内的方法，该属性名为 methods ， methods 被命名为方法，是调用对象上下文中的函数，还可以操作对象中包含的数据

Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。

<span v-bind:title=”nowDate”> 鼠标悬停 </span>

=>

<span :title=”nowDate”> 鼠标悬停 </span>

<a v-on:click=”clickHandle”>click test</a>

=>

<a @click=”clickHandle”>click test</a>

案例

<template>
    <div>
            <!--
                v-on 指令用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件
                Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。
                v-bind指令可以缩写为一个冒号，
                v-on指令可以缩写为@符号。
            -->
            <h3 align="center">用v-on属性绑定事件</h3>
            <a href="#" v-on:click="test()">超级链接</a><br>
            <input type="button" value="点击我" v-on:click="test2()">
            <h3>v-on可以简写为@符号</h3>
            <a href="#" @click="test()">超级链接</a><br>
            <input type="button" value="点击我" @click="test2()">
            <h3 align="center">使用v-bind绑定属性</h3>
            <span :title="span标签的title属性">鼠标悬浮查看title属性</span>

            <h3 align="center">实现计算器功能</h3>
            <!-- <button @click="calc()">{{count}}</button><br> -->

            <input type="button" @click="calc" v-model="count">

            <h3 align="center">请使用vue的v-for和v-if指令完成以下数据的渲染（不渲染分数低于60的学生）</h3>
            <ul>
                <li v-for="s in studList" v-if="s.score>=60" :key="s.name">姓名：{{s.name}}||性别：{{s.gender}}||年龄：{{s.age}}||成绩：{{s.score}}</li>
            </ul>
    </div>
</template>
<script>
    export default({
        name:'VON',
        data(){
            return{
                count:0,
                studList:[
                    {name: '张三', gender: '男', age: 16, score: 88 },
                    { name: '李四', gender: '女', age: 18, score: 59 }
                ]

            }
        },
        methods:{
            test(){
                alert("您点击了超级链接");
            },
            test2(){
                alert("您点击了按钮");
            },
            calc(){
                this.count++;
            }

        }
    })
</script>

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893

CSDN专家-赖老师（软件之家）

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
第7讲：v-bind属性绑定,v-model双向绑定,v-on事件监听使用

v-model一般用于数据的双向绑定（表单元素设置了之后会忽略掉value，checked，selected），常用在表单及 1.v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化。如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,-- 绑定一个属性 -->
复制链接

扫一扫