常用指令

指令：HTML标签上带有V-前缀的特殊属性，不同指令具有不同含义。
常用指令

指令	作用
v-bind	为HTML标签绑定属性值，如设置href , css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if	条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else	条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染,遍历容器的元素或者对象的属性

v-bind

绑定html标签的属性值

    <a v-bind:href="url">链接1</a>
    <a  :href="url">链接2</a>

v-model

在表单元素上创建双向数据绑定

<input type="text" v-model="url">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-指令</title>
    <script src="Vue.js"></script>

</head>
<body>


<div id="app">

    <a v-bind:href="url">链接1</a>
    <a  :href="url">链接2</a>

    <input type="text" v-model="url">
</div>

<script>

  new Vue({
      el:"#app",
      data:{
          url: "https://www.baidu.com"
      }
  } )


</script>


</body>
</html>

一旦通过v-bind或者v-model绑定了一个变量，这个变量必须在数据模型中声明

v-on

为HTML标签绑定事件

<div id="app">
  <input type="button" value="点我一下"  v-on:click="handle()">
  //简写
  <input type="button" value="点我一下"  @click="handle()">
</div>

<script>
  new Vue({
    el:"#app",//vue接管区域
    data:{

    },
    methods:{
      handle:function () {
        alert("你点我一下");
      }
    }

  })

</script>

JZTXT

Vue常用指令

常用指令

v-bind

v-model

v-on