vuejs模板中使用html代码
2017-01-20 16:02
549 查看
<!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>
相关文章推荐
- Vue.js 模板使用方法
- vue.js template模板的使用(仿饿了么布局)
- vuejs模板使用方法
- 关于使用vue.js的模板渲染时出现一瞬间的设置的模板的解决方案
- Soy文件生成JS文件 - 一个使用Google soy模板的例子
- js 中多行模板 解决方案---使用注释
- jquery模板jquery.tmpl.js使用教程(附jquery.tmpl.js下载)
- 使用impress.js模板制作的HTML5网页幻灯片
- Ecshop lefttime.js用法,ecshop倒计时lefttime.js在dwt模板中的使用
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- js高效模板引擎artTemplate 的使用总结
- node.js express中使用jquery模板
- Node.js笔记(六)不使用页面模板渲染界面
- angular.js的路由和模板在asp.net mvc 中的使用
- Backbone.js 使用模板
- AEAI Portal-常用JS以及模板使用方法
- js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由
- JS模板引擎jTemplates 使用笔记(一)
- Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)
- angular.js的路由和模板在asp.net mvc 中的使用