vue監(jiān)聽(tīng)用戶輸入和點(diǎn)擊功能

發(fā)布時(shí)間：2020-09-11 10:15:56 來(lái)源：腳本之家閱讀：150 作者：小羽向前跑欄目：web開(kāi)發(fā)

本文實(shí)例為大家分享了vue監(jiān)聽(tīng)用戶輸入和點(diǎn)擊的具體代碼，供大家參考，具體內(nèi)容如下

功能1：監(jiān)聽(tīng)用戶輸入和點(diǎn)擊，并實(shí)時(shí)顯示，

功能2：點(diǎn)擊發(fā)布，編輯頁(yè)面隱藏，顯示發(fā)布成功。

功能1 html代碼：

使用：v-model監(jiān)聽(tīng)，!submmited視圖默認(rèn)顯示，注意監(jiān)聽(tīng)option v-for="(i,index) in authors" v-bind:value="authors[index]，

監(jiān)聽(tīng)當(dāng)下用戶點(diǎn)擊的那個(gè)；

 <div id="add-blog">
  <h3>添加博客</h3>
  <form v-if="!submmited">
  <label for="" class="">博客標(biāo)題</label>
  <input class="" type="text" v-model="blog.title" required/>
  <br/>
  <label for="" class="">博客內(nèi)容</label>
  <textarea class="" v-model="blog.content"></textarea>
  <div id="checkboxs">
   <label for="">Vue.js</label>
   <input type="checkbox" value="vue.js" v-model="blog.categories"/>
   <label for="">react.js</label>
   <input type="checkbox" value="react.js" v-model="blog.categories"/>
   <label for="">javasript</label>
   <input type="checkbox" value="javasript.js" v-model="blog.categories"/>
   <label for="">css</label>
   <input type="checkbox" value="css" v-model="blog.categories"/>
  </div>
  <label for="">作者：</label>
  <select v-model="blog.author">
   <option v-for="(i,index) in authors" v-bind:value="authors[index]">
   {{i}}
   </option>
  </select>
  <button v-on:click.prevent="post">添加博客</button>
  </form>
  <hr/>
  <div id="preview">
  <h4>博客總覽</h4>
  <p>博客標(biāo)題：</p>
  <p class="color">{{blog.title}}</p>
  <p>博客內(nèi)容：</p>
  <p class="color">{{blog.content}}</p>
  <p>博客分類</p>
  <ul>
   <li v-for="categories in blog.categories" class="color">
   {{categories}}
   </li>
  </ul>
  <p>作者：</p>
  <p class="color">{{blog.author}}</p>
  </div>
 </div>

功能1 js代碼：

data(){
   return{
   blog:{
    title:"",
    content:"",
    categories:[],
    author:""
   },
   authors:[
    "張三","李四","王五"
   ],
   submmited:false
   }
  },
 methods:{
   post:function () {
   this.$http.post("https://jsonplaceholder.typicode.com/posts/"{
    title:this.blog.title,
    body:this.blog.content,
})
   .then(function (data) {
    //console.log(data);
   })
   }
  }

功能2 html代碼：

 <div v-if="submmited">
  <h4>您的博客發(fā)布成功</h4>
 </div>

功能2 js代碼

this.submmited=true 讓 “您的博客發(fā)布成功” 顯示

methods:{
   post:function () {
   this.$http.post("https://jsonplaceholder.typicode.com/posts/"{
    title:this.blog.title,
    body:this.blog.content,
})
   .then(function (data) {
    //console.log(data);
    this.submmited=true
   })
   }
  }

addblog.vue所有代碼：

<template>
 <div id="add-blog">
  <h3>添加博客</h3>
  <form v-if="!submmited">
  <label for="" class="">博客標(biāo)題</label>
  <input class="" type="text" v-model="blog.title" required/>
  <br/>
  <label for="" class="">博客內(nèi)容</label>
  <textarea class="" v-model="blog.content"></textarea>
  <div id="checkboxs">
   <label for="">Vue.js</label>
   <input type="checkbox" value="vue.js" v-model="blog.categories"/>
   <label for="">react.js</label>
   <input type="checkbox" value="react.js" v-model="blog.categories"/>
   <label for="">javasript</label>
   <input type="checkbox" value="javasript.js" v-model="blog.categories"/>
   <label for="">css</label>
   <input type="checkbox" value="css" v-model="blog.categories"/>
  </div>
  <label for="">作者：</label>
  <select v-model="blog.author">
   <option v-for="(i,index) in authors" v-bind:value="authors[index]">
   {{i}}
   </option>
  </select>
  <button v-on:click.prevent="post">添加博客</button>
  </form>
  <div v-if="submmited">
  <h4>您的博客發(fā)布成功</h4>
  </div>
  <hr/>
  <div id="preview">
  <h4>博客總覽</h4>
  <p>博客標(biāo)題：</p>
  <p class="color">{{blog.title}}</p>
  <p>博客內(nèi)容：</p>
  <p class="color">{{blog.content}}</p>
  <p>博客分類</p>
  <ul>
   <li v-for="categories in blog.categories" class="color">
   {{categories}}
   </li>
  </ul>
  <p>作者：</p>
  <p class="color">{{blog.author}}</p>
  </div>
 </div>
</template>
 
<script>
 export default {
  name: "addblog",
  data(){
   return{
   blog:{
    title:"",
    content:"",
    categories:[],
    author:""
   },
   authors:[
    "張三","李四","王五"
   ],
   submmited:false
   }
  },
  methods:{
   post:function () {
   this.$http.post("https://jsonplaceholder.typicode.com/posts/",this.blog)
   .then(function (data) {
    console.log(data);
    this.submmited=true
   })
   }
  }
 }
</script>
 
<style scoped>
#add-blog *{
 box-sizing: border-box;
}
#add-blog{
 margin: 20px auto;
 max-width: 600px;
 padding:20px;
}
 label{
 display: block;
 margin:20px 0 10px;
 }
 input[type="text"],textarea,select{
 display: block;
 width: 100%;
 padding: 8px;
 }
 textarea{
 height: 200px;
 }
 #checkboxs label{
 display: inline-block;
 margin-top: 0;
 }
 #checkboxs input{
 display: inline-block;
 margin-right: 10px;
 }
 button{
 display: block;
 margin:20px 0;
 background: crimson;
 border:0;
 padding:14px;
 border-radius: 4px;
 font-size: 18px;
 cursor: pointer;
 color: white;
 }
 #preview{
 padding:10px 20px;
 border: 1px dotted #ccc;
 margin:30px 0;
 }
 .color{
 color: blue;
 }
</style>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

vue監(jiān)聽(tīng)用戶輸入和點(diǎn)擊功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽