vuejs模板中使用html代码
<!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代码的更多相关文章
- 如何在smarty模板中执行php代码
Smarty模板主要的目的是分离逻辑层和表现层,所以在模板中不应该包含逻辑部分,逻辑层也不应该含有HTML.要在模板中插入逻辑程序的这种做法"非常"不被推荐,在你的case中. 如 ...
- 在smarty模板中嵌入php代码
我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...
- django模板中使用JQ代码实现瀑布流显示效果
settings中的配置不再详细说明 一.路由代码 from django.contrib import admin from django.conf.urls import url from app ...
- dedecms模板中使用php代码
{dede:php} echo “test”: {/dede:php} 使用这段代码之前要在后台的系统--系统基本参数--其它选项 里找到 模板引擎禁用标签: php 将其删除
- 读书笔记 effective c++ Item 44 将与模板参数无关的代码抽离出来
1. 使用模板可能导致代码膨胀 使用模板是节省时间和避免代码重用的很好的方法.你不需要手动输入20个相同的类名,每个类有15个成员函数,相反,你只需要输入一个类模板,然后让编译器来为你实例化20个特定 ...
- pageadmin CMS网站建设教程：模板中如何实现信息数据共享
pageadmin CMS网站制作教程:模板中如何实现信息数据共享 很多时候信息数据需要共享,一个最常用的应用场景就是手机版(独立手机,非响应式)本共享pc版本数据,下面以这个场景为例讲解. 假设手机 ...
- ThinkPHP模板中JS等带花括号处会被解析错误的解决办法
如下图,当本人在ThinkPHP框架的模板中写jQuery代码的时候,写了一些注释,并且注重是斜线和换括号{是连着一起的,这层语法上来时是没问题的,但是在ThinkPHP 的模板引擎解析下,会被解析掉 ...
- 在PHP与HTML混合输入的页面或者模板中就需要对PHP代码进行闭合
PHP程序的时候会在文件的最后加上一个闭合标签,如下: <?phpclass MyClass{public function test(){//do something, etc.}}?> ...
- eclipse中添加Java代码注释模板
eclipse中添加Java代码注释模板 1.Window->Preference->Java->Code Style->Code Template,进入注释编辑界面 2.文件 ...
随机推荐
- codeforces 400 C Inna and Huge Candy Matrix【模拟】
题意:给出一个矩形的三种操作,顺时针旋转,逆时针旋转,对称,给出原始坐标,再给出操作数,问最后得到的坐标 画一下模拟一下操作就可以找到规律了 #include<iostream> #inc ...
- Debian9.5 系统配置持久化iptables规则
RedHat和SUSE系列下有比较好用的iptables管理工具,可以像控制服务进程一样来对防火墙进行管理及控制,Debian系发行版默认不开启iptables,当然也没有与之相关的能直接管理的工具了 ...
- [BJWC2011]禁忌 AC 自动机 概率与期望
#include<cstdio> #include<algorithm> #include<cstring> #include<string> #inc ...
- [HNOI2006]超级英雄（二分+网络流）
[HNOI2006]超级英雄 题目描述 现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目, ...
- 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) A】 Palindromic Supersequence
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 字符串倒着加到原串右边就好 [代码] #include <bits/stdc++.h> using namespace ...
- hdu 4707 Pet【BFS求树的深度】
Pet Time Limit: 4000/2000 MS (Java/Others) ...
- WAS集群系列（5）：集群搭建：步骤3：安装IHS软件
选择"安装IBM HTTPServer"选项,点击"安装向导".例如以下图提示: 安装提示,逐步点击"下一步",当中偶有几处细节注意就可以. ...
- RenderScript on LLVM笔记
Android 为何引入 Render Script: 3D 可移植 ( 直接用 opengl 也能够移植呀?) 性能 易用性 ( 让 opengl 难入门的人,用 Render Script ?) ...
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...
- VMware中CentOS6.5启动出现An error occurred during the file system check