{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
    <form action="/chkUid" method="POST">
        <div class="weui-cell weui-cell_swiped">
            <div class="weui-flex">
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Host}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Port}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.Path}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">{{.ScriptName}}</div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                    value="weui input error"
                                                    placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder">
                        <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                                style="color: #FFF;text-align: center;" type="submit">运行
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
{{end}}
</div>
<div id="app">
@@message@@
</div>
</body>

</html>
<script src="/static/js/vue.js"></script>
<script>
    var app = new Vue({
        delimiters: ["@@", "@@"],
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
{{end}}


extend选项和delimiters选项 - CSDN博客 https://blog.csdn.net/dear_mr/article/details/72667749

id重复  
{{define "chkUrl"}}
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>chkUrl--脚本管理</title>
    <link rel="stylesheet" href="/static/WeUI_files/weui.css">
    <link rel="stylesheet" href="/static/WeUI_files/example.css">
</head>
<body style="margin:1em ;">
<div class="weui-cells page__category-content">
    <div class="page__hd">
        <h1 class="page__title">chkUrl</h1>
        <p class="page__desc">检测url状态信息</p>
    </div>
</div>
<div class="weui-cells page__category-content">
{{range .}}
{{/*<form action="/chkUid" method="POST">*/}}
    <div class="weui-cell weui-cell_swiped" id="appT">
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">{{.Host}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Port}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.Path}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">{{.ScriptName}}</div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder"><input class="weui-input" type="number" pattern="[0-9]*"
                                                value="weui input error"
                                                placeholder="请输入uid（0-9）" style="margin-left: 2em;" name="uid">
                </div>
            </div>
            <div class="weui-flex__item">
                <div class="placeholder">
                    <button class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:"
                            style="color: #FFF;text-align: center;" type="submit" v-on:click="t()">运行    @{message}@
                    </button>
                </div>
            </div>
        </div>
    </div>
{{/*</form>*/}}
{{end}}
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
    let app = new Vue(
            {
                delimiters: ['@{', '}@'],
                el: '#appT',
                data: {message: 'Hello Vue!'},
                methods: {
                            t: function() {
                                        this.$http.get('/testVue', {foo: 'bar'}).then(
                                            response => {
                                            // get status
                                            response.status;
                                            // get status text
                                            response.statusText;
                                            // get 'Expires' header
                                            response.headers.get('Expires');
                                            // get body data
                                            //注意服务端为“Email”,
                                            // response.body.Email; 数据不被解析
                                            app.message = response.body.email;
                                            },
                                            response =>{// error callback
                                            }
                                    )
                                }
                            },
            }
    );
</script>
{{end}}




												


											
extend选项和delimiters选项  vue  数据绑定  html form 对比  id重复的更多相关文章
	

    
								
  1. Vue数据绑定(一)
		
    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
    
		
    2. 
						
  2. (三)vue数据绑定及相应的命令
		
    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
    
		
    3. 
						
  3. Vue数据绑定
		
    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson04 一 双括号用来数据绑定 (1)写法一: {{message}}, ...
    
		
    4. 
						
  4. 浅析vue数据绑定
		
    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
    
		
    5. 
						
  5. Vue数据绑定和响应式原理
		
    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
    
		
    6. 
						
  6. zencart后台管理中选项名称和选项内容和属性控制页面出错解决办法 WARNING: An Error occurred, please refresh the page and try again
		
    后台管理中选项名称和选项内容和属性控制出现以下错误的解决办法WARNING: An Error occurred, please refresh the page and try again zen  ...
    
		
    7. 
						
  7. 17: VUE数据绑定 与 Object.defineProperty
		
    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
    
		
    8. 
						
  8. Ceph 存储集群1-配置：硬盘和文件系统、配置 Ceph、网络选项、认证选项和监控器选项
		
    所有 Ceph 部署都始于 Ceph 存储集群.基于 RADOS 的 Ceph 对象存储集群包括两类守护进程: 1.对象存储守护进程( OSD )把存储节点上的数据存储为对象: 2.Ceph 监视器( ...
    
		
    9. 
						
  9. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？
		
    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 转 Python执行系统命令的方法
			
    传送门 Python执行系统命令的方法 http://www.linux-field.com/?p=15 Python中执行系统命令常见方法有两种: 两者均需 import os (1) os.sys ...
    
			
    2. 
						
  2. 记录vim经常使用的几个命令
			
    vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统下标准的编辑器. $ vim 1.txt 以vi打开一个文件就直接进入一般模式了(这是默认的模式).在这个模式中, 你可以使用上下左 ...
    
			
    3. 
						
  3. LeetCode OJ——Text Justification
			
    http://oj.leetcode.com/problems/text-justification/ 编译代码要看warnings!它提供了可能出问题的情况,比如类型转换上unsigned int  ...
    
			
    4. 
						
  4. DOS底下常用命令
			
    DOS底下常用命令: dir (directory) :列出当前目录下的文件以及文件夹 md (make directory): 创建目录 rd (remove directory):删除目录 cd  ...
    
			
    5. 
						
  5. 邁向IT專家成功之路的三十則鐵律 鐵律二十三：IT人的成家之道-樸實
			
    根據內政部一份2013年最新的調查報告指出台灣人的離婚率位居全球第三,想想看如果這是經濟成長率的排名表現那該有多好.然而究竟為何在台灣這塊小小的土地上,不僅離婚非常高而且晚婚的人也非常的多,其原因肯定 ...
    
			
    6. 
						
  6. 实践认识--ANN
			
    1. 常用激活函数  激活函数的选择是构建神经网络过程中的重要环节,下面简要介绍常用的激活函数. (1) 线性函数 ( Liner Function ) (2) 斜面函数 ( Ramp Functio ...
    
			
    7. 
						
  7. Kermit,Xmodem,1K-Xmodem,Ymodem,Zmodem传输协议小结
			
    来自:http://blog.163.com/czblaze_3333/blog/static/208996228201272295236713/ Kermit协议 报文格式: 1.       MA ...
    
			
    8. 
						
  8. Android 适配器教程 （六）
			
    我们的适配器学习已经接近尾声了.尽管这不是一个大问题,可是确实是值得学习的一块知识,回忆一下之前五讲的知识.我们已经学到了非常多东西了. 在之前五讲中.我们已经由浅入深的认识了适配器,从最简单的Lis ...
    
			
    9. 
						
  9. Path SumI、II——给出一个数，从根到子的和等于它
			
    I.Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up a ...
    
			
    10. 
						
  10. Windows 编程1
			
    杀死一个进程 使用命令 system( taskkill /f /im     QQ.exe); 即可. 打开一个进程 使用命令 system("应用程序的位置");   头文件: ...
    
			
    11.