Vue官网学习(模板语法:八、语法糖:v-bind和v-on的缩写)

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

简单示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双大括号语法</title>
</head>
<body>
<div id="app">
  <input type="text" :value="inputValue">
  <a @click.prevent="aClick">点击</a>
</div>
</body>
<script src="../static/js/Vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      inputValue: "我是Input里面的值"
    },
    methods: {
      aClick(){
        console.log("aClick");
      }
    }
  })
</script>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42154259/article/details/106942154