【Vue基础】二、Vue中的指令

1. v-on指令

v-on指令将事件绑定在元素上，可以简写为@。

v-on:click="" //点击后触发事件

v-on:keydown.enter="" //按下回车后触发事件

@click=""  //简写

v-on绑定的事件可以调用methods中的方法，调用时只需写方法名，不用加括号。

addItem

export default{
  methods: {
    addItem() {
      this.list.push({
        name: 'pineapple',
        price: 256
      })
    }
  }

显示效果

2. v-text和v-html指令

data () {
  return {
    hello: '
world
',
  }
}

显示效果:上为v-text，下为v-html

3. v-for指令循环遍历

3.1

v-for 是放在需要循环遍历展示的组件下，而不是父组件

{{item}}

3.2

data () {
  return {
    num: 1,
    status: false,
  }
}

{{num+1}}
{{status ? 'success' : 'fail'}}

显示效果

3.3

使用v-for遍历数组时，用item,index进行遍历。

{{item.name}}-{{
  item.price}}-{{index}}

data () {
  return {
    list: [
    {
      name: 'apple',
      price: 34
    },
    {
      name: 'banana',
      price: 21
    }
  ],
 }
}

显示效果

3.4

通过v-bind绑定一个class，为index%2==0的项添加classa这个类

{{item.name}}-{{
  item.price}}-{{index}}

3.5

使用v-for遍历对象时，用key，value进行遍历。

{{key}}-{{value}}

data () {
  return {
    objList: {
     name: 'orange',
     price: '78',
     color: 'red',
     weight: 14
    }
  }
}

显示效果

3.6

addItem

这种方法会改变值，但是不会在页面触发更新，

export default{
  methods: {
    addItem() {
      this.list[1]={
        name: 'pineapple',
        price: 256
      }
    }
  },

引入Vue 通过Vue的set方法可改变数组的值，并能页面触发更新
Vue.set（数组对象， 第几项 ， 变成什么）

import Vue from 'vue'
export default{
  methods: {
    addItem () {
      Vue.set( this.list, 1, {
        name: 'pineapple',
        price: 256
      })
    }
  },

4. v-bind指令

4.1 v-bind绑定标签属性

使用v-bind指令来绑定标签属性

to baidu

data () {
  return {
    link:'www.baidu.com',
    hello: '
world
',

v-bind可缩写为“:”

4.2 v-bind绑定组件属性

也可给组件绑定属性

data () {
  return {
    dataA:'12',

dataA属性改变时， 组件中的dataA也会改变

4.3 v-bind绑定class

使用v-bind绑定class

123

data () {
  return {
    classStr:'red-color',

p标签就拥有了red-color这个类
用v-bind绑定的class与组件原有的class不冲突

显示效果

绑定的类也可以是个对象

123

data () {
  return {
      className: {
      'red-font': true,
      'blue-font': false,
      'yellow-font': true
    },

为true添加进class 为false的不添加

显示效果

绑定的类也可以是个数组

123

data () {
  return {
    classA: 'classa',
    classB: 'classb',

显示效果

可以通过变量控制显示

123

data () {
  return {
    hasError: true,
classB: 'classb',

也可以绑定内联样式 ，样式必须用引号

123

data () {
  return {
    linkCss: {
      'color' : 'red' ,
      'font-size': '20px'
    },

5. v-if 和v-show指令控制显示

v-if 的值为false时直接清除该元素
v-show 的值为false时讲该元素设为display:none

export default{
  methods: {
toggle () {
  this.isPartA = !this.isPartA
}

toggle

partA
partB

显示效果

显示效果

也可以使用 v-else ，作用即v-if =false

partA
no data