关于vue的指令不生效问题
一、问题说明初学的时候写了一个使用了vue的html页面，结构如下：<!DOCTYPE HTML><html><head><meta charset="UTF-8"><script src="https://cdn.jsdelivr.net/n
一、问题说明
初学的时候写了一个使用了vue的html页面，结构如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div v-if= "Math.random() < 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
</body>
</html>
说明：
该页面引入了vue，没有在js里声明vue对象，运行后发现此时vue的指令不生效。
二、结论
只有当创建了vue对象后，vue指令才生效。
完整的，可使用的结构应该如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{randomNum}}</div>
</div>
<script>
var v = new Vue({
el: '#app',
data: {
randomNum: Math.random()
}
});
</script>
</body>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)