vue.js表單代碼（vue代碼大全）

本文目錄一覽：

• 1、如何利用Vue.js庫實現表單校驗
• 2、vue.js怎麼把表單提交到data里
• 3、.vue文件怎麼寫js代碼
• 4、Vue.js實現表格渲染的方法
• 5、如何使用vuejs實現更好的Form validation
• 6、如何利用Vue.js庫中的v-model綁定表單中的數據

如何利用Vue.js庫實現表單校驗

表單提交，在form標籤中增加onsubmit事件來判斷表單提交是否成功 function validate(obj) { if (confirm(“提交表單?”)) { alert(obj.value); return true; } else { alert(obj.value); return false; } }

vue.js怎麼把表單提交到data里

vue.js把表單提交到data里：

axios({

url: ‘/user’,

method: ‘post’,

data: {

firstName: ‘Fred’,

lastName: ‘Flintstone’

},

transformRequest: [function (data) {

// Do whatever you want to transform the data

let ret = ”

for (let it in data) {

ret += encodeURIComponent(it) + ‘=’ + encodeURIComponent(data[it]) + ”

}

return ret

}],

headers: {

‘Content-Type’: ‘application/x-www-form-urlencoded’

}

})

.vue文件怎麼寫js代碼

單個組件裡面可以使用 import $ from ‘jquery’ 引用

當前你得使用npm把jquery 安裝了。 把jquery 用export default 導出來(就是在jquery.js的最後一行寫上 export default $)， 然後使用import $ from 『jquery的文件地址』

至於 script標籤裡面怎麼寫

import $ from ‘jquery’

export default {

  data: function() {

    return {

      testData: 1 // 這個對象裡面定義所有的變數 這些變數可以 在html直接和dom綁定

    }

  },

  mounted: function() {

    // 生命周期函數， 有好幾個 執行的順序都不一樣，可以根據場景 選擇不同的生命周期函數 這塊一般是初始化數據的地方

  },

  methods: { // 這裡寫所有的方法， 這些方法可以在 方法內部使用this.方法名調用，也可以在html 中使用@時間名 = 『函數名()』調用

    init() {  

      // 實例方法

      // 使用this.變數可以訪問data中的變數

      console.log(this.testData)

    }

  }

}

Vue.js實現表格渲染的方法

我們大多時候渲染表格都是key值在頁面上寫死的情況下，一個個value渲染，那我們遇到數據是鍵值對的時候該如何渲染呢？

我們查看vue的官方文檔，如下：

值域

v-for

v-for

也可以接收一個整數，此時它將重複模板數次。

div

span

v-for=”n

in

10″{{

n

}}

/span

/div

結果：

那我們就可以通過如下方法來渲染列表：

table

class=”table

table-bordered”

tbody

tr

v-for=”n

in

items.length/2″

td{{items[2*n].user}}/td

td{{items[2*n].msg}}/td

td{{items[2*n+1].user}}/td

td{{items[2*n+1].msg}}/td

/tr

/tbody

/table

export

default

{

data()

{

return{

items:

[

{user:’A’,msg:’1′},

{user:’B’,msg:’2′},

{user:’C’,msg:’3′},

{user:’D’,msg:’4′},

{user:’E’,msg:’5′},

{user:’F’,msg:’6′},

]

}

}

}

效果如下：

可以通過更改數組長度除以的數值來實現列數的調整！

以上這篇Vue.js實現表格渲染的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:Vue.js學習教程之列表渲染詳解深入理解Vue

的條件渲染和列表渲染詳解vuejs之v-for列表渲染vue.js實現條件渲染的實例代碼

如何使用vuejs實現更好的Form validation

舉個例子吧，我用的的是vue-form

html:

form v-form name=”myform” @submit.prevent=”onSubmit” role=”form”

legend class=”text-center”Vue-form demo/legend

div class=”form-group”

label郵箱*/label

input class=”form-control” v-model=”model.name” v-form-ctrl required name=”name” /

/div

div class=”form-group”

label用戶名*/label

input class=”form-control” v-model=”model.email” v-form-ctrl name=”email” type=”email” required /

/div

div class=”errors” v-if=”myform.$submitted”

p class=”bg-danger text-center” v-if=”myform.name.$error.required”請輸入用戶名./p

p class=”bg-danger text-center” v-if=”myform.email.$error.email”請輸入正確的郵箱./p

/div

button class=”btn btn-success btn-block” type=”submit”提交/button

/form

js:

new Vue({

el: ‘#app’,

data: {

myform: {},

model: {}

},

methods: {

onSubmit: function() {

console.log(this.myform.$valid);

if(this.myform.$valid==true)

alert(“提交成功”);

}

}

});

demo完整代碼在這裡可以查看

如何利用Vue.js庫中的v-model綁定表單中的數據

vue.js的一大功能便是實現數據的雙向綁定，本文就表單處理時運用v-model指令實現雙向綁定做一個介紹：

v-model這個指令只能用在input, select,textarea這些表單元素上，所謂雙向綁定，指的就是我們在js中的vue實例中的data與其渲染的dom元素上的內容保持一致，兩者無論誰被改變，另一方也會相應的更新為相同的數據。這是通過設置屬性訪問器實現的。例如：

app.html

!doctype html

html lang=”zh-CN”

head

meta charset=”UTF-8″

title

vuejs 過濾器、ajax數據、嵌套循環、if判斷、事件監聽

/title

style type=”text/css”

[v-cloak] { display: none }

/style

/head

body

div id=”app”

form

姓名：

input type=”text” v-model=”data.name” placeholder=”姓名”/

br /

性別：

input type=”radio” id=”one” value=”One” v-model=”data.sex”/

label for=”man”男/label

input type=”radio” id=”two” value=”Two” v-model=”data.sex”/

label for=”male”女/label

br /

input type=”checkbox” id=”jack” value=”book” v-model=”data.interest”/

label for=”jack”閱讀/label

input type=”checkbox” id=”john” value=”swim” v-model=”data.interest”/

label for=”john”游泳/label

input type=”checkbox” id=”move” value=”game” v-model=”data.interest”/

label for=”move”遊戲/label

input type=”checkbox” id=”mike” value=”song” v-model=”data.interest”/

label for=”mike”唱歌/label

br /

身份：

select v-model=”data.identity”

option value=”teacher” selected教師/option

option value=”doctor”醫生/option

option value=”lawyer”律師/option

/select

/form

ppredata: {{$data | json 2}}/pre/p

/div

/body