37.VUE学习之-表单的综合运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue</title>
<link rel="stylesheet" href="">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
<style type="text/css">
.h1{
color: red;
}
.h2{
color: green;
}
img{
width: 150px;
height: auto;
}
</style>
</head>
<body>
<div id="hdcms">
<form action="" class="form-horizontal">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">文章管理</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label for="" class="col-sm-2 control-label">标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model.trim.lazy="field.title">
{{field.title}}
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">栏目</label>
<div class="col-sm-10">
<select v-model="field.cid" class="form-control" multiple>
<option value="">==请选择栏目==</option>
<option v-for="v in category" :value="v.cid">{{v.title}}</option>
</select>
</div>
{{field.cid}}
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">属性{{field.flag}}</label>
<div class="col-sm-10">
<div class="checkbox-inline" v-for="v in flag">
<input type="checkbox" v-model="field.flag" :value="v.name"> {{v.title}}
</div>
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">点击数</label>
<div class="col-sm-10">
<input type="number" class="form-control" v-model.number="field.click">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">链接</label>
<div class="col-sm-10">
<input type="text" class="form-control" v-model="field.url"><br>
<img :src="field.url" alt="">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">摘要</label>
<div class="col-sm-10">
<textarea name="" class="form-control"
v-model="field.description"></textarea>
</div>
{{field.description}}
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">类型</label>
<div class="col-sm-10">
<div class="radio-inline" v-for="v in type">
<input type="radio" v-model="field.type" :value="v.name"> {{v.title}}
</div>
{{field.type}}
</div>
</div>
</div>
</div>
<button class="btn btn-primary col-sm-offset-2">保存</button>
</form>
</div>
<script>
var app = new Vue({
el: '#hdcms',
watch: {
'field.click': function (n, o) {
console.log(typeof(n));
},
'field.title':function(n,o){
console.log(n.length);
}
},
data: {
type: [
{name: 'draft', title: '草稿'},
{name: 'send', title: '正式发布'},
{name: 'times', title: '延迟发布'}
],
flag: [
{name: 'hot', title: '热门'},
{name: 'recommend', title: '推荐'}
],
category: [
{cid: 1, title: 'hdphp新闻'},
{cid: 2, title: 'HDCMS'},
{cid: 3, title: '后盾人新闻'},
{cid: 4, title: '后盾IT教育新闻'}
],
field: {
title: '后盾人 人人做后盾',
click: 100,
url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2034208240,2505314860&fm=26&gp=0.jpg',
description: '这是内容接要',
type: 'send',
flag: [],
cid: []
}
},
methods: {}
});
</script>
</body>
</html>
效果:
37.VUE学习之-表单的综合运用的更多相关文章
- 【Vue】强化表单的9个Vue输入库
一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交
vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...
- vue+element 动态表单验证
公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
- bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue动态生成表单
vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...
- 【VUE】3.表单操作
1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...
- Vue.js学习 Item9 – 表单控件绑定
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...
- Vue.js学习笔记——表单控件实践
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...
随机推荐
- Hive 基本语法操练（一）：表操作
Hive 和 Mysql 的表操作语句类似,如果熟悉 Mysql,学习Hive 的表操作就非常容易了,下面对 Hive 的表操作进行深入讲解. **(1)先来创建一个表名为student的内部表** ...
- Java操作Excel之POI简单例子
/** * 利用POI操作Excel表单 * * 需要jar包: * HSSF针对03及以前版本,即.xls后缀 * |---poi-3.16.jar * XSSF针对07及以后版本,即xlsx后缀 ...
- varnish pipe 和pass的区别分析
这两天在学习varnish,在学到vcl时,不理解pipe和pass的区别以及如何区分加以应用.通过两天的搜索,总算是理清了概念.现在记录在博客上跟大家分享. 当 vcl_recv 函数接收到请求时, ...
- <Openssl下hash函数>
hash函数:是不可逆的函数,它的输入可以是任意长度的字节流.它的输出是固定大小的,hash函数的作用就是给你的文件产生一个摘要,它是独一无二的. 例如:y=f(x) x代表输入 y代表输出 输 ...
- 寻找jar包的好方法
好东西分享下: 下载jar包不用愁 http://maven.outofmemory.cn/
- Java并发(四):并发集合ConcurrentHashMap的源码分析
之前介绍了Java并发的基础知识和使用案例分析,接下来我们正式地进入Java并发的源码分析阶段,本文作为源码分析地开篇,源码参考JDK1.8 OverView: JDK1.8源码中的注释提到:Conc ...
- >>我要到处浪系列 之 JS随便投票小脚本
首先郑重声明:我不是对任何网站或者任何个人或组织有意见,仅仅是觉得 4点几 的评分对某些玩票的片段都太高了,为了落实想法,切实履行公民的投票权,并且 bibibabibobi biubiubiu..所 ...
- C#运算符、控制流
1 运算符 1.1 一元运算符: -(负号).+(正号):可以省略 1.2 二元运算符: 优先级,*(乘)./(除).%(取余).+(加).-(减).=(赋值) 二元赋值运算符,=.+=.-= ...
- MvvmCross框架在XamarinForms中的使用入门
做XamarinForms快一年了,最近趁着项目不是很紧,有点空闲的时间,研究了一下MvvmCross这个框架,感觉挺高大上的.一边研究一下写点入门的东西吧,大部分的东西github都有. 1添加Pa ...
- Reduce侧连接
1.reduce side join 在reduce端进行表的连接,该方法的特点就是操作简单,缺点是map端shffule后传递给reduce端的数据量过大,极大的降低了性能 连接方法: (1)map ...