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