<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template模版</title>
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no,email=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<script src="../assets/js/flexible_css.js"></script>
<script src="../assets/js/flexible.js"></script>
<script src="../assets/js/vue.js"></script>
</head>
<body>
<h1>template模版 三种写法</h1>
<div id="app">
{{message}}
</div>
<template id="dd2"> <!-- 第二种 -->
<h2 style="color:red;">我是template标签模版2</h2>
</template>
<script type="x-template" id="dd3"> //方法3
<h2 style="color:red">我是script标签模版3</h2>
</script>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
message:"hello 你好",
},
// template:`<h2 style="color:red">我是选项模版</h2>`, 第一种
template:"#dd2", //第二种
// template:"#dd3" //第三种
})
</script>
</html>
浙公网安备 33010602011771号