js学习笔记（v-bind绑定class、style、属性和对象）

dogeggcrazy

已于 2022-10-14 16:30:44 修改

阅读量420

点赞数

分类专栏： vue.js 前端 JavaScript 文章标签： javascript 学习前端

于 2022-10-14 16:29:06 首次发布

本文链接：https://blog.csdn.net/dogeggcrazy/article/details/127321674

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

vue.js

15 篇文章 0 订阅

订阅专栏

首先，v-bind的基础用法，是用来绑定html中元素的属性。例如，img、a标签等是html元素，而img中的src则是该元素的属性值。

例如下面：

 <!--bind让行内属性不写死-->
    <div id="app">
    <a href="https://www.jd.com/?cu=true">跳转</a>
     <a v-bind:href="url">跳转</a>
     <button @click="change" target="_blank">跳转</button>
    </div>
</body>
<script>
   new Vue({
    el:'#app',
    data:{
      url:'https://www.taobao.com/'
    },
    methods:{
      change(){
       this.url ='https://www.tmall.com/?spm=a211oj.20590379.a2226mz.1.15af1a04kyi6KQ'
      }
    }
})

在数据中定义url这样就将页面中链接的地址绑定到了“url”上，同理我们也可以定义img在img里放上图片的路径，而路径属于该元素的属性值

v-bind绑定class

         <style>
       .box{
            width: 300px;
            height: 300px;
            border: black 1px solid;
        }
        .bg{
           background-color: deeppink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box" v-bind:class="{bg:true}"></div>
        <!--想要动态的设置class,也是给一个对象-->
        <!--属性名:就是类名-->
        <!--属性值是布尔值,如果给true,代表有这个类目;如果给false,代表没有这个类名。-->
        <div class="box" v-bind:class="{bg:isBg}">
            <button @click="btn">更改颜色</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            isBg:false
        },
        methods:{
          btn(){
            this.isBg=true
          }
        }
    })

我们可以传给 v-bind:class 一个对象，以动态地切换 class，比如说上面的isBg就是一个对象,值为false，但是我们通过绑定事件btn点击改变为true就能够显示颜色，这就表现了以动态地切换 class的属性值，对象中还可以传入多个class的值，且:class和普通的class是可以并存的

v-bind绑定style

<body>
    <div id="app">
         <!--把样式属性改造成对象属性要用大括号包裹起来，把样式转换成属性值，用引号引起来把分号改成逗号,把样式名称转换成属性名称-->
         <!-- 在行内属性中书写样式-->
        <div style="color: goldenrod; font-size: 24px;">我是王子</div>
        <!--把对象值改变成变量-->
        <div v-bind:style="{color:'green',fontSize:'24px'}">我是青蛙</div>
        <!--把对象值改成变量-->
        <!--代表样式color没有写死,而是根据变量color的值来,变量color是什么,样式color就是什么。-->
        <div v-bind:style="{color:color,fontSize:size}">我是巨龙</div>
        <!--以对象方式绑定style属性:属性名对应的样式名，属性值对应的样式值，一般给变量。-->
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
             color:'red',
             size:'50px'
        },
        methods:{

        }
    })
</script>

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

<body>
  <div id="app">
    
    <div :style="[style1,seyle2]">文本内容</div>
 
</div>
 </body>
<script>
    new Vue({
        el:'#app',
        data:{
            style1:{
                color:'blue',
                fontSize:24 +'px'
            },
            seyle2:{
              fontWeight:'bold',
            }
        }
    })
</script>

这是另一个例子，这里style1是data中定义的一个对象而color和fontSize是对象的属性值，这表明style也可以应用多个对象，但是要用数组语法