<!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. [BZOJ2821]作诗(分块）

    题意 N个数,M组询问,每次问[l,r]中有多少个数出现正偶数次对于100%的数据,1≤n,c,m≤105 题解 (传说lyd省选的时候看错题   把题看成这个了   从此又多了一道分块神题)把N个数 ...

  2. 使用 swoole_process 实现 PHP 进程池

    swoole_process 主要是用来代替 PHP 的 pcntl 扩展.我们知道 pcntl 是用来进行多进程编程的,而 pcntl 只提供了 fork 这样原始的接口,容易使用错误,并且没有提供 ...

  3. P2420 让我们异或吧(树链剖分)

    题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中-xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...

  4. centos的终端字体杂乱的问题

    sudo yum -y install dejavu-sans-* dejavu-serif-fonts 下载字体一下就好了

  5. 石子合并 （区间DP）

    一．试题在一个园形操场的四周摆放N堆石子(N≤100),现要将石子有次序地合并成一堆.规定每次仅仅能选相邻的两堆合并成新的一堆,并将新的一堆的石子数.记为该次合并的得分.编一程序.由文件读入堆数N及每 ...

  6. android内存释放处理

    不知道大家对android内存释放都做什么样的处理,本人接触android不久,近期开发小游戏的过程中,由于游戏界面组件较多.刚玩游戏的时候感觉还好,可是重复进入游戏界面玩几次之后,游戏就会卡顿,我瞬 ...

  7. Win8.1应用开发之文件操作

    在操作文件之前,先相应用的应用功能声明进行设定.用户通过C#(非UI)对win8.1上的文件进行訪问,仅仅能局限于图片,音乐,视频和文档四个目录. 而通过文件选取器则能訪问到整个系统的文件. (一)应 ...

  8. Windows改动cmd字符集

    在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...

  9. 使用LruCache和DiskLruCache来下载图片

    LruCache是一个非常好用的图片缓存工具: 主要做法是:滑动图片时将图片的bitmap缓存在LruCache<String, Bitmap>中,退出程序后将图片缓存进文件中.採用Dis ...

  10. 自定义分页控件-基于Zhifeiya的分页控件改版

    基于Zhifeiya的分页控件改版的分页. html显示代码: <div class="pagelist"> {{.pagerHtml}} </div> c ...