本文目录一览：
- 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
