<!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. iOS崩溃日志

    今天看crash report ,有这样两个crash: 调用 stopUpdatingLocation 函数的是一个CLLocationManager 类型的对象,为什么报错的时候会把这个对象转成N ...

  2. 请教如何用 peewee 实现类似 django ORM 的这种查询效果。

    本人新入坑的小白,如有不对的地方请包涵~~~! 在 django 中代码如下:模型定义: class Friends(models.Model): first_id = models.IntegerF ...

  3. Vuejs componet

    Vuejs  componet <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  4. mutt发邮件

    在 /etc/Muttrc 文件添加以下内容:   set from="laughingliang@chaincar.com" set use_from=yes set envel ...

  5. bzoj1230 开关灯 线段树

    好久没写线段树了..被一道线段树裸题卡了一个上午 对区间进行异或,查询的时候直接用区间长度减去原有是数量就是改变完的数量 #include<bits/stdc++.h> using nam ...

  6. STM32中断名词

    1.NVIC的优先级概念    占先式优先级 (pre-emption priority):    高占先式优先级的中断事件会打断当前的主程序/中断程序运行— —抢断式优先响应,俗称中断嵌套.    ...

  7. Spring Cloud学习笔记【四】断路器Hystrix

    雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因 “服务提供者” 的不可用导致 “服务消 ...

  8. [Teamcenter 2007 开发实战] 调用web service

    前言 在TC的服务端开发中, 能够使用gsoap 来调用web service. 怎样使用 gsoap  , 參考 gsoap 实现 C/C++ 调用web service 接下来介绍怎样在TC中进行 ...

  9. printf中的使用（c语言）

    #include <stdio.h> int main(int argc, const char * argv[]) { //整形输出 printf("%d,%d",3 ...

  10. webpack03

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...