<!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. PostgreSQL Replication之第五章 设置同步复制（3）

    5.3 冗余和停止复制 谈到同步复制,有一个现象一定不能被遗漏.想象一下,我们有一个同步复制的双节点集群.如果slave故障会发生什么?答案是master不能容易地区分慢slave和故障slave,因 ...

  2. shell call python

    python -c "import os; p=os.getcwd(); print(p);print(p);print(p);print('test over')"

  3. <Sicily>Threecolor problem

    一.题目描述 有红黄蓝3种颜色的n个珠子,师傅希望悟空把它们排成红色珠子在左,黄色珠子居中,蓝色珠子在右的一行,然后告诉师傅,从左数起,第m个珠子是什么颜色.众所周知,悟空是只猴子,他没有这个耐心,你 ...

  4. CentOS6.9下sftp配置和scp用法

    基于 ssh 的 sftp 服务相比 ftp 有更好的安全性(非明文帐号密码传输)和方便的权限管理(限制用户的活动目录). 1.如果只想让某些用户只能使用 sftp 操作文件, 而不能通过ssh进行服 ...

  5. Eclipse StartExplorer插件

    http://www.cnblogs.com/wuxiang/p/5489961.html

  6. MapReduce JOB 的输出与输出笔记。

    提高 MapReduce 价值,自定义输入和输出. 比如跳过存储到 HDFS 中这个耗时的布置. 而只是从原始数据源接受数据,或者直接将数据发送给某些处理程序. 这些处理程序在 MapReduce 作 ...

  7. 二、 HBase核心功能模块。

      Hadoop 框架包含两个核心组件: HDFS 和 MapReduce 其中     HDFS                是文件存储系统,负责数据存储:     MapReduce     是 ...

  8. ArcSDE学习笔记--------增、删、改、查操作

    建立连接 package org.lq.ssm.gp.controller; import com.esri.sde.sdk.client.SeConnection; import com.esri. ...

  9. 函数指针的转换 & C的注意点

    再让我们看看<signal.h>中声明的signal函数void (*signal(int, void(*)(int)))(int)首先,用typedef简化,typedef void ( ...

  10. Windows 7: Update is not applicable to your computer

    https://www.sevenforums.com/windows-updates-activation/119088-update-not-applicable-your-computer.ht ...