oclick vue 传参函数_vue基础之事件v-onclick="函数"用法示例

深藏阁楼爱情的钟 2022-10-25 05:56 169阅读 0赞

本文实例讲述了vue基础之事件v-οnclick=函数用法。分享给大家供大家参考，具体如下：

v-on:click/mouseout/mouseover/dblclick/mousedown.....

事件:

v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

new vue(\{

el:'\#box',

data:\{ //数据

arr:\['apple','banana','orange','pear'\],

json:\{a:'apple',b:'banana',c:'orange'\}

\},

methods:\{

show:function()\{ //方法，这里是show，不能用alert

alert(1);

\});

实例：为data添加数据

www.jb51.net 为data添加数据

window.οnlοad=function()\{

new vue(\{

el:'\#box',

data:\{ //数据

arr:\['apple','banana','orange','pear'\],

json:\{a:'apple',b:'banana',c:'orange'\}

\},

methods:\{

add:function()\{

this.arr.push('tomato');//this指代new vue()，也是data

\});

\};

*  \{ \{value\}\}

运行效果：

![03e980d768d50b45155cd4ab7003e95b.png][]

实例：点击按钮，div显示/消失，切换。v-show="a"

www.jb51.net 点击按钮，div显示/消失，切换。v-show="a"

window.οnlοad=function()\{

new vue(\{

el:'\#box',

data:\{ //数据

a:true

\},

methods:\{

adjust:function()\{

console.log(this.a);

if(this.a == true)\{

this.a = false;

\}else\{

this.a = true;

\});

\};

实例：vue简易留言本

www.jb51.net vue简易留言本

window.οnlοad=function()\{

new vue(\{

el:'\#box',

data:\{

mydata:\[\],

username:'',

name:'',

age:'',

nowindex:-100

\},

methods:\{

add:function()\{

this.mydata.push(\{

name:this.username,

age:this.age

\});

this.username='';

this.age='';

\},

deletemsg:function(n)\{

if(n==-2)\{

this.mydata=\[\];

\}else\{

this.mydata.splice(n,1);

\});

\};

用户名:

年　龄:

--------------------

<table>  用户信息表  
 <tbody> 
  <tr> 
   <th>序号</th> 
   <th>名字</th> 
   <th>年龄</th> 
   <th>操作</th> 
  </tr> 
  <tr> 
   <td>{ {index+1}}</td> 
   <td>{ {item.name}}</td> 
   <td>{ {item.age}}</td> 
   <td><p>删除</p></td> 
  </tr> 
  <tr> 
   <td colspan="4"><p>删除全部</p></td> 
  </tr> 
  <tr> 
   <td colspan="4"><p>暂无数据....</p></td> 
  </tr> 
 </tbody> 
</table>

#### 确认删除么? ####

取消

确认

运行效果：

![46bce25d7cbe3faa7f95b8b8f1db086a.png][]

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

希望与广大网友互动？？

点此进行留言吧！

[03e980d768d50b45155cd4ab7003e95b.png]: /images/20221024/61f01d26685d4531b5643d6ebece6f85.png
[46bce25d7cbe3faa7f95b8b8f1db086a.png]: /images/20221024/9ee30c032a0c40d58eab58e7638c7a94.png