Vue学习----第二天_绑定属性【5.30】

最新推荐文章于 2022-08-29 19:57:09 发布

lvan-ah

最新推荐文章于 2022-08-29 19:57:09 发布

阅读量225

点赞数

分类专栏： Vue 文章标签： vue 无监督学习 web vue.js

本文链接：https://blog.csdn.net/weixin_43848802/article/details/106440433

版权

Vue 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

本章为绑定属性

一、v-bind

1.v-bind介绍

在这里插入图片描述

2.v-bind基础

在这里插入图片描述
代码如下：

<div id='app'>
    <!-- 错误写法：这里不可以写mustache语法 -->
    <!-- <img src="{{imgUrl}}" alt=""> -->

    <!-- 正确做法：使用v-bind指令 -->
    <img v-bind:src="imgUrl" alt="">
    <a v-bind:href="aHref">百度一下</a>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        imgUrl: 'https://cn.vuejs.org/images/logo.png',
        aHref: 'http://baidu.com'
      }
    })
  </script>

3.v-bind语法糖

在这里插入图片描述

4.v-bind绑定class

在这里插入图片描述
①.v-bind动态绑定class(对象语法)

代码如下：

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>

<body>

  <div id='app'>
    <!-- <h2 class="active">{{message}}</h2>
    <h2 :class="active">{{message}}</h2> -->

    <!-- :class="{类名：布尔值}"，为true添加，false不添加 -->
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
    <button v-on:click="btnClick">按钮</button>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        active: 'active',
        isActive: true,
        isLine: false
      },
      methods: {
        btnClick() {
          this.isActive = !this.isActive
        }
      }
    })
  </script>

</body>

②.v-bind动态绑定class(数组语法)
在这里插入图片描述
代码如下：

<div id='app'>
    <h2 :class="[active, line]">{{message}}</h2>
    <h2 :class="getClasses()">{{message}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        active: 'aaaaa',
        line: 'bbbbb'
      },
      methods: {
        getClasses() {
          return [this.active, this.line]
        }
      }
    })
  </script>

5.v-bind绑定style

①.v-bind绑定style-【对象语法】
在这里插入图片描述
代码如下：

<div id='app'>
    <!-- {key(属性名), value(属性值)} -->
    <!-- 必须加上单引号，否则被当做变量解析 -->
    <h2 :style="{fontSize: '20px'}">{{message}}</h2>
    <!-- finalSize被当做一个变量来使用 -->
    <h2 :style="{fontSize: finalSize, backgroundColor: finalColor}">{{message}}</h2>
    <h2 :style="getStyles()">{{message}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        finalSize: '50px',
        finalColor: 'red'
      },
      methods: {
        getStyles() {
          return {fontSize: this.finalSize, backgroundColor: this.finalColor}
        }
      }
    })
  </script>

效果如下：
在这里插入图片描述
②.v-bind绑定style-【数组语法】

代码如下：

<div id='app'>
    <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
  </div>

  <script src='./js/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        baseStyle: {backgroundColor: 'red'},
        baseStyle1: {fontSize: '50px'}
      }
    })
  </script>

效果如下：
在这里插入图片描述
内容持续更新中…
lvan学习笔记-文章内容仅个人观点
2020.5.30

lvan-ah

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue学习----第二天_绑定属性【5.30】

本章为绑定属性一、v-bind1.v-bind介绍2.v-bind基础代码如下：<div id='app'>    <img v-bind:src="imgUrl" alt=""> <a v-b
复制链接

扫一扫