模板引擎的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <style>
      .c1{
        color:red;
        font-size: 50px;
      }
      .c2{
        color:green;
        font-size: 50px;
      }
      .c3{
        color:orange;
        
      }
      .c4{
        font-size: 50px;
      }



    </style>
</head>
<body>
    <div id="box">
        <p v-once>{{title}}</p>
        <!--v-once是只编译一次，在数据发生改变的时候，不会在响应-->
        <div v-html="str"></div>
        <!--当编译的内容有html的标签时，如果直接用{{}}的形式，是不会编译html标签的，可以用以上形式-->
        <p v-bind:class="clname">你好</p>
        <!--如果data中没有对应的属性值，就需要用到拼接''-->
        <p v-bind:class="{c3,c4}">你好</p>
        <!--class还可以写成对象的形式-->
        <p v-bind:class="clname1">你好</p>
        <!--控制一个显示一个不显示-->
        <!-- <p v-bind:class="clname1">你好</p> -->
    </div>
</body>
    <script>
         var box=new Vue({
            el:"#box",
            data:{
               title:"hello world",
               str:"<h1>veb</h1>",
               clname:"c1",
               clname1:"c3",
               clname2:"c4"



            }
         })



    </script>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容