vue的常用指令【v-bind v-for v-on v-model 自定义指令】

vue的常用指令

v-bind指令

作用：动态绑定一个或多个属性，属性值是一个动态的【值是依赖于data中的数据源】

使用方式：

<!-- v-bind绑定href属性值 -->
<a v-bind:href='url'>跳转</a>


<!-- v-bind绑定href属性值（简写形式） -->
<a :href='url'>跳转</a>

绑定

绑定HTML Class

1.对象绑定

– html代码

<ul class='app' :class="{'Fone':isOne, 'Ftwo':isTwo}"></ul>

– js代码

var vue = new Vue({
   
    el:'.app',
    data:{
   
        isOne:true,
        isTwo:true
    }
})

最终渲染为

<ul class='app Fone Ftwo' ></ul>

当data里的 isOne 或 isTwo 变化时，class列表会相应更新

以上代码等价于

// html代码

<ul class='app' :class="classObject"></ul>

// js代码

var vue = new Vue({
   
    el:'.app',
    data:{
   
        classObject:{
   
            'Fone':true,
            'Ftwo':true
        }
    }
})

2.数组语法

— html代码

<ul class="box" :class="[classA, classB]"></ul>

— js代码

var vm= new Vue({
   
    el:'.box',
    data:{
   
        classA:'Fone',
        classB:'Ftwo'
    }
})

补充

可以使用三目运算符

— html代码

<ul class="box" :class="[isA ? classA:'', classB]"></ul>

— js代码

var vm= new Vue({
   
    el:'.box',
    data:{
   
        classA:'Fone',
        classB:'Ftwo'
        isA:false 
    }
})

:属性=“data中的属性数据/methods/props/computed”

:属性=“js表达式环境，认为它就是可以直接写js了，字符串相关就要用引号”

— html代码

    <a :href="`http://www.baidu.com?id=${id}`">百度一下</a>
    <hr>
    <a :href="`http://www.baidu.com?id=`+id">百度一下</a>

— js代码

    const app = new Vue({
   
      el: '#app',
      data: {
   
        url: 'http://img.1314000.cn/face.png',
        id: 100
      },
    })

绑定 HTML css

1. 对象绑定

— html代码

<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">社恐泡面</div>

— js代码

var vm= new Vue({
   
    el:'#box',
    data:{
   
        activeColor:'#f00',
        size:'30px',
        shadow:'5px 2px 6px #000'
    }
})

或者
— html代码

	
<div id="box" :style="styleObject">社恐泡面</div>

— js代码

var vm= new Vue({
   
    el:'#box',
    data:{
   
        styleObject:{
   
            color:'red',
            fontSize:'30px'
        }
    }
})

2.数组语法

举个栗子
— html代码

  <div id="app">
    <!-- 样式class它也是属性，动态属性 :class="对象|数组" -->
    <h3 class="title" :class="activeObj">我是一个标题</h3>
    <!-- 数组 -->
    <!-- 
      如果新增样式，则默认情况下，对象无法直接生效，而数组可以生效
      如果对已有的样式，进行开关操作，建议用对象
     -->
    <!-- <h3 :class="activeArr">我是一个标题</h3> -->
    <button @click="setActive">让标题高亮</button>
  </div>

— js代码

    const app = new Vue({