vue指令之v-bind

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/100981646

使用vue指令之前需要先引入一个vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

这是我在例子中用到的cdn，也可自行到vue官网找别的cdn。

vue指令之v-bind

1.v-bind 绑定属性 （v-bind <==> : ）
class绑定 [ ] { }
style绑定 [ ] { }
缩写：":"

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

:class绑定不会替换掉原有的class样式
例子：
html:

<div id="app">

//可以使用对象来判断是否添加class样式{red:flag}
    <span :class="[{red: flag}, spanwidth]" class="red">vueclass样式绑定</span>
</div>

也可以使用三目运算进行判断是否添加样式： [flag ? ‘red’ : ’ ']
还可以使用 &&进行判断: [ flag && ‘red’]
js:

var vm = new Vue({
  el:"#app",
  data:{
    flag:ture,
    spanwidth:'width',
  }
})

:style绑定会替换掉原有的style的属性值
例子：
html:

<div id="app">
    <img :style="[{width: width}, blue]" style="width:100px;">
</div>

js:

var vm = new Vue({
  el:"#app",
  data:{
    width：'200px',
    blue:{
      border:1px solid black;
    },
    
  }
})

//点击切换背景色的一个小例子

css:

.green{
            background-color: green;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }

html:

   <div id="app">
        <button @click="handleClick($event, 2)">点击</button>
        <span :class="spanClassArr[spanIndex]"> {{ name }}</span>
    </div>

js:

  <script>
        var vm = new Vue({
            el : '#app',
            data : {
                name: "我就是我",
                spanClassArr: [ 'red' , 'green' ,'blue' ],
                spanIndex:0,
                spanCount:0,
            },
            methods: {
                handleClick (e, num){
                    console.log(e, num)
                    // this == vm
                    this.spanIndex =++ this.spanCount % 3;
                }
            }
        })
    </script>