一、template简单使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!--此处页面显示hello-->
<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"<div v-if='flag'>{{msg}}</div><div v-else>123</div>"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
});
</script>
</head>
<body>
</body>
</html>
注意 template内不能单独访问{{mes}}，外层必须放入div等其他元素标签
2、vant的示例
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 引入jq文件 -->
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<!--此处页面显示-->
<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:'',
flag:true
},
template:'<van-button type="warning">警告按钮</van-button>'
});
</script>
</head>
<body>
</body>
</html>
3、改进使用组件
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- 引入jq文件 -->
<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<!--此处页面显示-->
<div id="app"></div>
<script>
let vm = new Vue({
el:"#app",
data:{
msg:'',
flag:true,
value1: 0,
value2: 'a',
option1: [
{ text: '全部商品', value: 0 },
{ text: '新款商品', value: 1 },
{ text: '活动商品', value: 2 }
],
option2: [
{ text: '默认排序', value: 'a' },
{ text: '好评排序', value: 'b' },
{ text: '销量排序', value: 'c' },
]
},
template:'<van-dropdown-menu><van-dropdown-item v-model="value1":options="option1" /><van-dropdown-item v-model="value2" :options="option2" /></van-dropdown-menu>'
});
</script>
</head>
<body>
</body>
</html>
如图：
