在html中使用el标签

最新推荐文章于 2023-08-09 20:56:21 发布

原创最新推荐文章于 2023-08-09 20:56:21 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5 #css

vue 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了如何在HTML中使用el标签，并结合Vue.js实例进行详细说明。重点指出el属性需指向包含Vue实例的元素，如`el: '#app'`，确保Vue数据绑定和操作能够正确作用于对应的DOM元素。

需要注意el标签被id 为 app的div所包含,因为
new Vue({
el: ‘#app’, //这个当然也可以换成.app，响应的就得对应class名字
data: function() {
return { visible: false }
}
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
	<div class="dv" id="app">
		<br/><br/>
 <el-divider class="pgdi"><span class="spd">XXX</span></el-divider>
                  
   </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
  <style scoped>
  .dv{
  width: 50%;
  margin-top: 10px;
  margin-left:auto;
  margin-right: auto;
  }
  .title{
    width: 100%;
  }
  .table{
    width: 100%;
    margin-top: 5px;
  }
  .tab{
    width: 100%;
  }
  .ip,.se{
    width: 98%;
  }
  .tab td{
    border: 1px solid #E4E7ED;
    text-align-last: center;
  }
  .di{
    width: 39%;
  }
  .pse{
    width: 100%;
  }
  .tdd{
    color: #909399;
    background:#F2F6FC;
  }
  .tg{
    width: 100%;
    border: 1px solid #E4E7ED;
  }
  .tg td{
    border: 1px solid #E4E7ED;
    text-align: center;
    color: gray;
    height: 40px;
  }
  .pgse{
    width: 80%;
  }
  .pgdi{
    width: 100%;
    color: gray;
  }
  .tg2,.tg3{
    width: 100%;
    border: 1px solid #E4E7ED;
  }
  .tg2 td,.tg3 td{
    border: 1px solid #E4E7ED;
    color: gray;
    height: 60px;
    font-size: 0.8em;
    text-align: left;
  }
  .sp{
    color: gray;
    font-size: 0.8em;  
  }
  .spd{
    color: gray;
  }
  .caddiv{
    width: 100%;
    height: 500px;
  }
  </style>
</html>