Vue 基础指令

1、v-html

用法：跟js中的innerHTML 用法类似，用于设置元素的内容，可以识别标签

语法：v-html=" 表达式 / 变量 "

<template>
  <div id="app">
    <p v-html="pH"></p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      pH:'<a href="">内容</a>'
    }
  },
}
</script>

<style>

</style>

2、v-show

用法：用来控制元素的显示与隐藏，与css中的 display:none 类似

语法：v-show: " 表达式 "     表达式的值要为布尔值，true / false

<template>
  <div id="app">
    <p v-show="true">我是true</p>
    <p v-show="false">我是false</p>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>

</style>

3、v-if

用法：用来控制元素的显示与隐藏，根据表达式的布尔值判断

语法：v-if= " 表达式 "   表达式的值要为布尔值，true / false

<template>
  <div id="app">
    <p v-if="flag">我是true</p>
    <p v-if="!flag">我是false</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      flag:true
    }
  },
}
</script>

<style>

</style>

3、v-else    v-else-if

用法：与 v-if 一起使用，必须紧挨着，用来辅助 v-if 进行判断

语法：v-else  v-else-if

<template>
  <div id="app">
    <p v-if="num <= 20">我是true</p>
    <p v-else>我是false</p>

    <p v-if="num < 20">我是第一个判断</p>
    <p v-else-if="num >= 20">我是第二个判断</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      num: 20
    }
  },
}
</script>

<style></style>

4、v-on

用法：用来注册事件

语法：

v-on：事件名=“ 执行语句 ”

v-on：事件名=“ 执行函数名”

简写：@事件名=” 事件执行函数 “

<template>
  <div id="app">
    <button v-on:click="num++">{{ num }}</button>

    <button @click="addNum">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      num: 20
    }
  },
  methods: {
    addNum() {
      alert('成功点击')
    }
  }
}
</script>

<style></style>

5、v-bind

用法：动态设置标签的属性

语法：v-bind：属性名= ” 表达式 / 变量 “

简写：  ：属性名= ” 表达式 “

<template>
  <div id="app">
    <input type="text" v-bind:value="99">

    <input type="text" :value="num">
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      num: 20
    }
  }
}
</script>

<style></style>

6、v-for

用法：用于数据循环遍历

语法：v-for= ” ( item，index) in 数组名 “

简写：index如果用不到可以省略不写

  v-for= ” item in 数组名 “

注意：使用 v-for 最好再后面加个 key属性

作用：key属性可以给标签加上唯一标识符，便于后面使用和管理

语法：v-for= ” ( item，index) in 数组名 “   ：key= ” item.id “

         key的值必须有唯一性，不能重复

<template>
  <div id="app">
    <p v-for="item in arr" :key="item">{{ item }}</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      arr: [1, 2, 3, 4, 5]
    }
  }
}
</script>

<style></style>

7、v-model

用法：给元素进行数据绑定（双向绑定）

语法：v-model= ” 变量 “

<template>
  <div id="app">
    <input type="text" v-model="num">
    <button @click="num++">+</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      num: 10
    }
  }
}
</script>

<style></style>