2.带参数的指令
一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
| <a v-bind:href="url"></a> |
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<pre><a v-bind:href="url">百度</a></pre>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'http://www.baidu.com'
}
})
</script>
</body>
</html>
运行结果如下：
点击百度进入到百度首页。
3.v-on指令
另一个例子是 v-on 指令，它用于监听 DOM 事件：
下面的示例在用户点击按钮后对字符串进行反转操作：
| <a v-on:click=" reverseMessage "> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="src/vue.min.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el:'#app', data:{ message:"vue.js" }, methods:{ reverseMessage:function () { this.message=this.message.split('').reverse().join(''); } } }) </script> </body> </html>
|
点击反转字符串按钮，显示界面如下：
Vue.js 为两个最为常用的指令提供了特别的缩写：
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="reverseMessage"></a>
<!-- 缩写 -->
<a @click=" reverseMessage "></a>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
