④. 事件绑定
①. v-on:click
①. <input type=‘button’ v-on:click=‘num++’/>
<input type=‘button’ @click=‘num++’/> (简写)
②. 如果事件直接绑定函数名称,那么默认会传递事件对象作为第一个参数(handle)
③. 如果事件绑定函数调用,事件对象必须作为最后一个参数显示传递,并且事件对象名称必须是固定的$event(handle( ))
④. 代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-text="msg"></div> <!--直接绑定函数名称 如果事件直接绑定函数名称,那么默认会传递事件对象作为第一个参数 如果事件绑定函数调用,事件对象必须作为最后一个参数显示传递,并且事件对象名称必须是固定的$event --> <button v-on:click="handle">按钮1</button> <!--调用函数 --> <button @click="handle()">按钮2</button> <!--最后一个参数是envent --> <button @click="handleParam(123,$event)">带参数的方法</button> </div> <script src="../js/vue.js"></script> <script> var vm=new Vue({ el:'#app', data:{ msg:'1' }, methods:{ //这里的event可以不写 handle:function(event){ alert(event.target.tagName); }, handleParam:function(p,event){ console.log(p); console.log(event.target.tagName);//button console.log(event.target.innerHTML);//带参数的方法 } } }); </script> </body> </html>
②. v-bind属性绑定
- ①.以下两种写法等价:
<a v-bind:href='url'>跳转</a> <a :href='url'>跳转</a>
②. 字符串拼接
所以,要想在v-bind指令中使用字符串拼接,只需要结合引号即可
<span :text=' "we" + 1 '>使用</span> 会渲染成: <span text='we1'>使用</span>
③. 运算
<div :text='1 + 2'>test</div> 渲染成: <div text="3">test</div>
④. 调用函数
<div :text='getText()'>test</div> ...... <script> export default { methods: { getText() { return "this is text" } } } </script> 渲染成: <div text="this is text">test</div>
⑤. 使用对象
<template> <div class="hello"> <div :text='obj'>test</div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { obj: Object() } } } </script> 结果为: <div text="[object Object]">test</div>
如果对象有toString方法: <template> <div class="hello"> <div :text='obj'>test</div> </div> </template> <script> var obj = Object() obj.toString = function(){ return "data in obj" } export default { name: 'HelloWorld', data () { return { obj: obj } } } </script> 则渲染的是toString方法的值: <div text="data in obj">test</div>
⑥. 使用数组
<template> <div class="hello"> <div :text='array'>test</div> </div> </template> <script> var array = Array() array[0] = "1" array[1] = "2" export default { name: 'HelloWorld', data () { return { array: array } } } </script> 渲染为: <div text="1,2">test</div>
⑦. 动态绑定class或者style中是否存在
