<!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学习之-表单的综合运用的更多相关文章

  1. 【Vue】强化表单的9个Vue输入库

    一个设计不当的表单可能会使用户远离你的网站.幸运的是,对Vue开发者,有大量可用的Vue输入库让你轻松整理表单. 拥有直观而且对用户友好的表单有诸多好处,比如: 更高的转化率 更好的用户体验 更专业的 ...

  2. 034——VUE中表单控件处理之使用vue控制radio表单的实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. vue validate多表单验证思考 之前写过一个里外层，现在觉得不合适，应该平行的写，然后都给ret，最后判断ret 再做出反应，这样整体表单的所有验证就都报验证，然后最后提交的时候把组件内的对象合并到总的对象，再提交

    vue validate多表单验证思考 之前写过一个里外层,现在觉得不合适,应该平行的写,然后都给ret,最后判断ret 再做出反应,这样整体表单的所有验证就都报验证,然后最后提交的时候把组件内的对象 ...

  4. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  5. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. vue动态生成表单

    vue动态生成表单 一.下拉框 <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  7. 【VUE】3.表单操作

    1. Form组件渲染 1. components -> 新增组件Form.vue <template> <div>表单验证</div> </templ ...

  8. Vue.js学习 Item9 – 表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些 ...

  9. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

随机推荐

  1. (转)linux配置网卡的命令

    linux配置网卡的命令 原文:http://blog.51cto.com/lanxianting/1754923 1.配置命令 如果一台服务器需要通外网,能被远程连接,就得给这个台服务器配置ip,子 ...

  2. Oracle权限管理

    一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...

  3. .net中Response.End() 和Response.Redirect("http://dotnet.aspx.cc");

    问:什么情况下需要Response.End()语句,加这句有什么好处 答: 首先你要理解Response.End()的意思,它的意思是终止执行下面的语句!但有时不加和加上都一样,但还要加上好,为什么呢 ...

  4. 数据库用户被锁怎么办，报the passord logon

    –1.使用管理员用户登陆,查看用户状态: select username,account_status from dba_users; –2.修改用户状态: alter user base accou ...

  5. ElasticSearch之QueryBuilders

    1.termsQuery A filer for a field based on several terms matching on any of them 翻译过来:基于以下几个方面对其中任何匹配 ...

  6. IIS错误HTTP 错误 500.21 - Internal Server Error

    原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:以管理员身份运行cmd->输入“%windir%\Microsoft.NET\Framewo ...

  7. oracle 查询之前的表数据

    SELECT * FROM Student  AS OF TIMESTAMP SYSDATE - 3/1440 对SQL的解释说明: SYSDATE :当前时间 1440 :24h*60m=1440m ...

  8. 【Linux/Ubuntu学习 11】git查看某个文件的修改历史

    有时候在比对代码时,看到某些改动,但不清楚这个改动的作者和原因,也不知道对应的BUG号,也就是说无从查到这些改动的具体原因了- [注]:某个文件的改动是有限次的,而且每次代码修改的提交都会有commi ...

  9. iOS编程规范(整理)

    一.文档结构管理 1.建立Libraries文件夹,所有第三方库放入其中. 2.建立Utilities文件夹,自已封装的类放入其中. 3.建立Constants.h头文件,所有的常量定义于其中.Con ...

  10. HDU 3351 Seinfeld 宋飞正传（水）

    题意: 给出一个串,串内只有大括号,问经过几次改变可使全部括号合法?改变指的是可以将某一方向的括号变成另一方向. 思路: 利用栈的特点,若出现成对的合法括号,直接删掉,留下那些不合法的成为一串.既然不 ...