从零开始学VUE之模板语法(绑定属性)

最新推荐文章于 2024-08-27 15:59:21 发布

十六夜之彼岸舞

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/flowerStream/article/details/117505601

版权

绑定属性 v-bind指令(缩写":")

绑定属性(src)

用于动态绑定属性值,比如src动态绑定地址,新建v-bind.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
  <img src="url"/>
<!--  v-bind 全写-->
  <img v-bind:src="url"/>
<!--  v-bind 缩写-->
  <img :src="url"/>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            url: 'https://a2put.chinaz.com/uploads/20210409/fa4b0c297783e65ba6199f638b8f5ef3.jpg'
        }
    })
</script>
</html>

运行效果

当然不止能绑定src也能绑定其他属性,属性前加冒号就可以,就像 :src :href

绑定样式(class)

对象绑定语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../../js/vue.js"></script>
  <style>
    .active{
      color: yellow;
    }
    .line{
      display: none;
    }
  </style>
</head>
<body>
<div id="app">
<!--  通过属性控制样式的绑定-->
  <div :class="{active:isActive,line:isLine}">彼岸舞</div>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            isActive:true,
            isLine:false
        }
    })
</script>
</html>

运行效果

可以看到只有active,而line应为下面的值为false所以没有绑定

可以通过代码实时修改true/false控制是否绑定

案例:通过按钮控制字体颜色

点击按钮,字体变成红色,再次点击变回黑色,一直循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
    <style>
        .red{
            color: red;
        }
        .black{
            color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1 :class="{red:isRed,black:isBlack}">字体</h1>
        <button @click="bs">按钮</button>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            isRed: false,
            isBlack: false
        },
        methods:{
            bs(){
                if(this.isRed){
                    this.isBlack = true;
                    this.isRed = false;
                }else{
                    this.isBlack = false;
                    this.isRed = true;
                }
            }
        }
    })
</script>
</html>

运行效果

如果想定义固定的class,再新启一个属性就可以,vue会自动合并,不懂担心

<h1 class="xx" :class="{red:isRed,black:isBlack}">字体</h1>

数组绑定语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../../../js/vue.js"></script>
  <style>
    .active{
      color: yellow;
    }
    .line{
      display: none;
    }
  </style>
</head>
<body>
<div id="app">
<!--  通过属性控制样式的绑定-->
  <div :class="['active','line']">彼岸舞</div>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            isActive:true,
            isLine:false
        }
    })
</script>
</html>

感觉没啥意义,开发中也不用,基本都用对象绑定

绑定样式(style)

对象绑定语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div :style="{fontSize:finalFont,backgroundColor:finalColor}">彼岸舞</div>
        <!-- 通过对象简写 -->
        <div :style="styleObj">彼岸舞</div>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
          finalFont:'50px',
          finalColor: 'red',
          styleObj: {
                fontSize: '20px',
                backgroundColor: 'red'
          }
        }
    })
</script>
</html>

运行效果

数组绑定语法

其实就是为了区分多个样式组,将不同的样式分开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div :style="[fontStyle,backgroundStyle]">彼岸舞</div>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            // 字体样式对象
            fontStyle: {
                fontSize: '20px'
            },
            // 背景样式对象
            backgroundStyle: {
                backgroundColor: 'red'
            }
        }
    })
</script>
</html>

运行结果

作者：彼岸舞

时间：2021\05\31

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

十六夜之彼岸舞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学VUE之模板语法(绑定属性)

绑定属性 v-bind指令(缩写":")绑定属性(src)用于动态绑定属性值,比如src动态绑定地址,新建v-bind.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> &...
复制链接

扫一扫