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

<h2>1. v-on指令</h2>

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

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

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

@click=""  //简写

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

<button v-on:click="addItem">addItem</button>

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

显示效果

<h2>2. v-text和v-html指令</h2>

data () {
  return {
    hello: '<h1>world</h1>',
  }
}

<p v-text="hello"></p>
<p v-html="hello"></p>

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

<h2>3. v-for指令循环遍历</h2>

<h5>3.1 </h5>

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

<li v-for="item in list">{{item}}</li>

<h5>3.2 </h5>

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

<p>{{num+1}}</p>
<p>{{status ? 'success' : 'fail'}}</p>

显示效果

<h5>3.3 </h5>

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

<li v-for="(item,index) in list">{{item.name}}-{{
  item.price}}-{{index}}</li>

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

显示效果

<h5>3.4 </h5>

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

<li v-for="(item,index) in list" :class="{classa:index%2}">{{item.name}}-{{
  item.price}}-{{index}}</li>

<h5>3.5 </h5>

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

<li v-for="(value ,key) in objList">{{key}}-{{value}}</li>

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

显示效果

<h5>3.6 </h5>

<button v-on:click="addItem">addItem</button>

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

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
      })
    }
  },

<h2>4. v-bind指令</h2>

<h5>4.1 v-bind绑定标签属性</h5>

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

<a v-bind:href="link" v-bind:title="hello">to baidu</a>

data () {
  return {
    link:'www.baidu.com',
    hello: '<h1>world</h1>',

v-bind可缩写为“:”

<h5>4.2 v-bind绑定组件属性</h5>
也可给组件绑定属性

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

<componentA :dataA="dataA"></componentA>

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

<h5>4.3 v-bind绑定class</h5>
使用v-bind绑定class

<p class="green-color" v-bind:class="classStr">123</p>

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

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

显示效果

绑定的类也可以是个对象

<p v-bind:class="className">123</p>

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

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

显示效果

绑定的类也可以是个数组

<p v-bind:class="[classA,classB]">123</p>

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

显示效果

可以通过变量控制显示

<p v-bind:class="[{'classB': hasError}]">123</p>

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

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

<p v-bind:style="linkCss">123</p>

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

<h2>5. v-if 和v-show指令控制显示</h2>

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

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

<button v-on:click="toggle">toggle</button>

<p v-if="isPartA">partA</p>
<p v-show="!isPartA">partB</p>

显示效果 显示效果

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

<p v-if="isPartA">partA</p>
<p v-else>no data</p>