vue监听用户输入和点击功能

本文实例为大家分享了某视频剪辑软件监听用户输入和点击的具体代码，供大家参考，具体内容如下

功能1:监听用户输入和点击，并实时显示，

功能2:点击发布，编辑页面隐藏，显示发布成功。

功能一个超文本标记语言代码：

使用：v型监听，子限制视图默认显示，注意监听作者v-bind :值=' authors[index]中的选项v-for='(i，index)，

监听当下用户点击的那个；

div id='add-blog' h2添加博客/h2形式v-if='！类='的子限定'标签'博客标题/label input class=' type=' text ' v-model=' blog。'标题'必需/br/标签为=' class=' '博客内容/label text area class=' v-model=' blog。内容/文本区域div id='复选框s '标签为=' Vue。js/label输入类型=' checkbox '值=' vue。js ' v-model='博客。categories '/label for=' react。js/label输入类型=“checkbox”值=“react”。js ' v-model='博客。categories/label for=' javasript/label input type=' checkbox ' value=' javasript。js ' v-v作者：/label select v-model=' blog。作者选项v-for='(i，索引)在作者的v-bind :值='作者[索引]' { { I } }/选项/选择按钮v-:点击。protect=' post '添加博客/button/form HR/div id='预览' H3博客总览/h3 p博客标题：/p p class=' color ' { blog。标题} }/p p博客内容：/p p class=' color ' { blog。内容} }/p p博客分类/p ul Li v-for=' blog。categories ' class=' color ' { categories } }/Li/ul p作者：/p p class=' color ' { blog。作者} }/p/div/div功能一份联合材料代码：

data(){ return { blog : { title : ' '，content: ' '，categories:[]，author:'' }，author :['张三','李四','王五]，submmited:false } }，methods : { post : function(){ this .$ http。post(' https://jsonplaceholder。打字码。com/post/' { title : this。博客。title，body:this.blog.content，}).然后（函数（数据){ //console.log(数据);}) } }功能2html代码：

div v-if='提交' H3您的博客发布成功/h3 /div功能2份联合材料代码

this.submmited=true让"您的博客发布成功"显示

方法： { post : function(){ this .$ http。post(' https://jsonplaceholder。打字码。com/post/' { title : this。博客。title，body:this.blog.content，}).然后（函数（数据){ //console.log(数据);这个。submited=true })} }添加博客。某视频剪辑软件所有代码：

模板div id='add-blog' h2添加博客/h2形式v-if='！类='的子限定'标签'博客标题/label input class=' type=' text ' v-model=' blog。'标题'必需/br/标签为=' class=' '博客内容/label text area class=' v-model=' blog。内容/文本区域div id='复选框s '标签为=' Vue。js/label输入类型=' checkbox '值=' vue。js ' v-model='博客。categories '/label for=' react。js/label输入类型=“checkbox”值=“react”。js ' v-model='博客。categories/label for=' javasript/label input type=' checkbox ' value=' javasript。js ' v-v作者：/label select v-model=' blog。作者选项v-for='(i，索引)在作者的v-bind :值='作者[索引]' { { I } }/选项/选择按钮v-:点击。protect=' post '添加博客/button/form div v-if=' submit ' H3您的博客发布成功/h3 /div hr/div id='预览h3博客总览/h3 p博客标题：/p p class=' color ' { blog。标题} }/p p博客内容：/p p class=' color ' { blog。内容} }/p p博客分类/p ul Li v-for=' blog。categories ' class=' color ' { categories } }/Li/ul p作者：/p p class=' color ' { blog。作者} }/p/div/div/模板脚本导出默认值{ name: 'addblog '，data(){ return { blog : { title : ' '，content: ' '，categories 3360[]，author:'' }，author: '张三','李四','王五]，submmited:false } }，methods : { post : function(){ this .$ http。post(' https://jsonplaceholder。打字码。com/post/'，this.blog).然后（函数（数据){ console.log(数据);这个。submited=true })} } }/脚本样式范围为# add-blog * { box-size :边框-box；} # add-blog { margin : 20px auto；最大宽度： 600像素；padding:20px }标签{ display : block margin :20 px 0 10px }输入[type='text']，textarea，选择{ display:块宽度： 100%;padd : 8px } text area { height : 200 px } # check box s标签{ display : inline-block；边距-top : 0；} #复选框的输入{ display : inline-block；右边距： 10px}按钮{ display:块余量：20 px 0；背景：深红色；border :0 padd :14 pxborder-radius : 4px；font-size : 18px光标：指针；颜色：白色；} #预览{ padd :10 px 20 pxborder : 1px虚线# ccc余量：30 px 0；} .颜色{ color:蓝色；}/样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。