<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<style>
		.main{
			width:300px;
			height:300px;
			border:1px solid #ccc;
		}
		.s1{
			border:1px solid #0f0;
		}
		.s2{
			border:1px solid #d00;
		}
		[v-cloak]{
			display:none;
		}
	</style>
</head>
<body>
	<script  src="http://cdn.bootcss.com/vue/1.0.24-csp/vue.min.js"></script>

	<div class="app" v-cloak>
	    <input type="text" v-model="toggle" number>
	    <anchored-heading :level="toggle">Hello world!</anchored-heading>
	</div>

	<script type="text/x-template" id="anchored-heading-template">
	  <div>
	    <h1 v-if="level === 1">
	      <slot></slot>
	    </h1>
	    <h2 v-if="level === 2">
	      <slot></slot>
	    </h2>
	    <h3 v-if="level === 3">
	      <slot></slot>
	    </h3>
	    <h4 v-if="level === 4">
	      <slot></slot>
	    </h4>
	    <h5 v-if="level === 5">
	      <slot></slot>
	    </h5>
	    <h6 v-if="level === 6">
	      <slot></slot>
	    </h6>
	  </div>
	</script>

    <script>
     var anchoredHeading = {
     	  template:'#anchored-heading-template',
     	  props: {
     	    level: {
     	      type: Number,
     	      required: true
     	    }
     	  },
     	  ready:function(){
     	  	alert(3)
     	  }
     }
     new Vue({
		el:".app",
		data:{
		    toggle:0,
		},
        components:{
         anchoredHeading:anchoredHeading
        },
		ready:function(){
		}
	 })
   </script>
</body>
</html>

vuejs模板中使用html代码的更多相关文章

  1. 如何在smarty模板中执行php代码

    Smarty模板主要的目的是分离逻辑层和表现层,所以在模板中不应该包含逻辑部分,逻辑层也不应该含有HTML.要在模板中插入逻辑程序的这种做法"非常"不被推荐,在你的case中. 如 ...

  2. 在smarty模板中嵌入php代码

    我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...

  3. django模板中使用JQ代码实现瀑布流显示效果

    settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...

  4. dedecms模板中使用php代码

    {dede:php} echo “test”: {/dede:php} 使用这段代码之前要在后台的系统--系统基本参数--其它选项 里找到 模板引擎禁用标签: php  将其删除

  5. 读书笔记 effective c++ Item 44 将与模板参数无关的代码抽离出来

    1. 使用模板可能导致代码膨胀 使用模板是节省时间和避免代码重用的很好的方法.你不需要手动输入20个相同的类名,每个类有15个成员函数,相反,你只需要输入一个类模板,然后让编译器来为你实例化20个特定 ...

  6. pageadmin CMS网站建设教程：模板中如何实现信息数据共享

    pageadmin CMS网站制作教程:模板中如何实现信息数据共享 很多时候信息数据需要共享,一个最常用的应用场景就是手机版(独立手机,非响应式)本共享pc版本数据,下面以这个场景为例讲解. 假设手机 ...

  7. ThinkPHP模板中JS等带花括号处会被解析错误的解决办法

    如下图,当本人在ThinkPHP框架的模板中写jQuery代码的时候,写了一些注释,并且注重是斜线和换括号{是连着一起的,这层语法上来时是没问题的,但是在ThinkPHP 的模板引擎解析下,会被解析掉 ...

  8. 在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合

    PHP程序的时候会在文件的最后加上一个闭合标签,如下: <?phpclass MyClass{public function test(){//do something, etc.}}?> ...

  9. eclipse中添加Java代码注释模板

    eclipse中添加Java代码注释模板 1.Window->Preference->Java->Code Style->Code Template,进入注释编辑界面 2.文件 ...

随机推荐

  1. Servlet设置Cookie无效

    项目中保存用户信息用到了Cookie,之前没有太注意,今天怎么设置Cookie都无效,断点跟了无数遍,都没有找出问题所在,明明发送Cookie的代码都有执行,可是愣是找不到Cookie发送到哪里去了, ...

  2. 前端验证银行卡（Luhn校验算法）

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

  3. 把ISO文件当作光盘挂载

    当不能挂载光盘或者U盘时候,只需要把ISO文件传到某个目录中,比如/data下,即可挂载,如下所示:   mount -o loop /data/rhel-server-6.3-x86_64-dvd. ...

  4. Kubernetes1.5 集成dashboard

    Kubernetes1.5 集成dashboard 配置kubernetes的dashboard相对简单.同样的,只需要从源码中获取到dashboard-controller.yaml及dashboa ...

  5. Kubernetes安装配置（包括master和node）

    部署Kubernetes云计算平台,至少准备两台服务器,此处为4台,包括一台Docker仓库: Kubernetes Master节点:192.168.124.20 Kubernetes Node1节 ...

  6. 以替换为主的疯狂填词、sub()介绍

    去年接到一个任务,一直给拖到了今天,再这么下去可不行,今天我就要让你们看看我的厉害 任务是这样的:创建一个程序,读入文本文件,并让用户在该文本出现ADJECTIVE .NOUN.ADVERB或VERB ...

  7. MyBatis学习总结（10）——批量操作

    一.mybatis中的批量操作    批量操作核心就是一次传入多个数据然后进行相关操作,增删改查中掌握其中一个其他的也不成问题 1.最新在做的短信平台,要批量插入群发的短信记录: 当然批量操作还有:批 ...

  8. Java基础学习总结（19）——Java环境变量配置

    前言 学习java的第一步就要搭建java的学习环境,首先是要安装JDK,JDK安装好之后,还需要在电脑上配置"JAVA_HOME"."path"." ...

  9. 阿里云主机centos设置虚拟内存

    http://blog.csdn.net/luwei42768/article/details/51241758 https://my.oschina.net/u/2306127/blog/65726 ...

  10. java枚举在android项目应用

    今天修复一个公司非常早曾经的android应用功能,里面的代码逻辑已经全然错乱,然后发现返回的数据全然不正确了.然后修复了整整两天.然后我又一次整理了一遍,重构就算不上了. 然后就用上了枚举. 什么是 ...