vue基础语法（1）

1.基础语法

1.v-bind ：可以使用Vue中的数据
2.v-if v-else ：if语句，可以使用”num===2“
3.v-for ：list in lists
4.v-cloak:防止页面加载时闪烁
5.v-text:修改标签内的内容
6.v-html:修改标签内的标签
7.v-show:根据参数修改标签内的CSS

 测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--1.v-bind ：可以使用Vue中的数据
    2.v-if v-else ：可以使用”num===2“
    3.v-for list in lists
    5.v-text:修改标签内的内容
    6.v-html:修改标签内的标签
    7.v-show:根据参数修改标签内的CSS-->
<div id="app">
    <div v-bind:title="msg">{{title}}</div>
    <div v-if="flag">对的</div>
    <div v-else>错的</div>
    <div v-if="num===2">哈哈</div>
    <div v-else>擦擦</div>
    <li v-for="list in lists">
        {{list.message}}
    </li>
    <div v-text="div">123</div>
    <div v-html="div">123</div>
    <div v-show="flag" v-html="div">13</div>
</div>
<div>

</div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    var mv=new Vue({
       el:"#app",
       data:{
           msg:"hello",
           title:"标题",
           div:"<li>first</li><li>second</li>",
           flag:false,
           num:2,
           lists:[{
               message:1},
               {message:2},
               {message:3},
               { message:4},
               { message:5},
               {message:6
}
           ]
       }
    });

</script>
</html>
测试结果：
               

 

posted @ 2022-07-07 09:32  zcz666  阅读(24)  评论(0)    收藏  举报