<!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. bzoj1090 字符串折叠

    问题描述 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S  S 2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S)  SSSS…S(X个S). 3. 如果A ...

  2. eBay起诉指控亚马逊利用非法手段挖走其卖家

    [摘要]eBay在诉状中称,亚马逊的代表滥用eBay的内部电子邮件系统联系卖家,这违反了市场政策. 腾讯科技讯 10月18日消息,据外媒报道,拍卖网站eBay对亚马逊提起诉讼,指控这家美国零售巨头利用 ...

  3. Python学习笔记(3)--数据结构之列表list

    Python的数据结构有三种:列表.元组和字典 列表(list) 定义:list是处理一组有序项目的数据结构,是可变的数据结构. 初始化:[], [1, 3, 7], ['a', 'c'], [1, ...

  4. 洛谷 P2440 木材加工

    P2440 木材加工 题目背景 要保护环境 题目描述 题目描述: 木材厂有一些原木,现在想把这些木头切割成一些长度相同的小段木头(木头有可能有 剩余),需要得到的小段的数目是给定的.当然,我们希望得到 ...

  5. 仿分词统计的MapReduce 程序。

    HDFS 数据格式 :  举例单条数据:02-26 08:01:56 [qtp512249001-42] INFO  async-statistics - class com.spring.aop.S ...

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

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

  7. Chrome无界面浏览模式与自定义插件加载问题

    环境:Python 3.5.x + Selenium 3.4.3 + Chromedriver 2.30 + Chrome 60 beta或Chromium Canary 61 + WIN10 Chr ...

  8. ArcGIS api for javascript——查询，然后单击显示信息窗口

    描述 本例展示如何配置查询任务为示例的工作流程: 1.用户单击一个要素来加亮显示. 2.用户再一次单击要素来查看属性信息的 InfoWindow. 本例查询USA州,因此ESRI_StateCityH ...

  9. Java NIO和IO的主要差别

    我应该何时使用IO,何时使用NIO呢?在本文中,我会尽量清晰地解析Java NIO和IO的差异.它们的使用场景.以及它们怎样影响您的代码设计. Java NIO和IO的主要差别 下表总结了Java N ...

  10. Lesson 2 Building your first web page: Part 1

    In this ‘hands-on’ module we will be building our first web page in no time. We just need to quickly ...