当前位置: 首页 > article >正文

第八课 Vue中的v-bind指令

Vue中的v-bind指令

v-bind用于属性绑定,使得属性可以动态修改

v-bind动态修改class

动态修改的class名来源于data对象,而非手动给定

  1. 基础示例
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div v-bind:class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 
  1. v-bind简写

v-bind可以利用:作为简写方式

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div :class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 
  1. 多class名不冲突

动态绑定的class与原生class名不冲突,最终会合并成为一个

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <div class="test" :class="bg"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg'
            }
        })
    </script> 

4) v-bind绑定多class名

        <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }

        .color{
            color: blue;
        }
    </style>
    <div id="app">
        <div class="test" :class="[bg, color]">{{val}}</div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 'Hello World !',
                bg: 'bg',
                color: 'color'
            }
        })
    </script> 
  1. class状态控制

v-bind中的内容可以以{}运算符配合,进行简单的JS运算

1) 动态切换class

        <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .bg {
            background: red;
        }
    </style>
    <div id="app">
        <input type="button" value="点击我切换显示状态" @click="fun()">
        <div class="test" :class="{bg: status}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                bg: 'bg',
                status: true
            },
            methods: {
                fun(){
                    this.status = !this.status;
                }
            }
        })
    </script> 

v-bind绑定内嵌样式

v-bind style 可以进行内嵌样式编写,属性值为字符,多属性用逗号分隔

1) 基础示例

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="{background: 'red', width: 200 + 'px'}"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
        })
    </script> 

2) 动态内嵌样式

    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="style"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {background: 'red', width: 200 + 'px'}
            }
        })
    </script> 
  1. 多样式合并
    <style>
        .test{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
    </style>
    <div id="app">
        <div class="test" :style="[style1, style2]"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style1: {background: 'red', width: 200 + 'px'},
                style2: {height: 200 + 'px'}
            }
        })
    </script> 

http://www.kler.cn/news/359203.html

相关文章:

  • git init更改本地默认分支
  • 富格林:防备出金失败安全指南
  • 《深度学习》模型的部署、web框架 服务端及客户端案例
  • SD-WAN可以搭建在任何网络上,通过中央控制器管理企业所有用户的终端路由器,实现集中配置和监控。
  • 【学术会议征稿】第五届材料化学与复合材料国际学术会议(MCCM 2024)
  • 基于Multisim模拟乒乓球游戏竞赛电路(含仿真和报告)
  • 大数据-180 Elasticsearch - 原理剖析 索引写入与近实时搜索
  • 全方面熟悉Maven项目管理工具(二)坐标、pom.xml文件的解读!
  • VSCODE使用记录
  • 根据日志优化微调
  • 【刷题11】分治—快速排序
  • 精华帖分享 | 缠论系列
  • ArcGIS Pro SDK (十七)宗地结构
  • SourceMonitor,免费代码统计工具,覆盖率,圈复杂度,代码行
  • javase笔记6----集合1
  • MySQL【知识改变命运】07
  • maven父子结构的项目依赖包传递规则
  • smbms(2)
  • Jtti:phpStudy在运行PHP文件时出现中文乱码?
  • 尚动云馆·校园体育场馆管理系统(SpringBoot+Vue)