vue基本语法


1.鼠标悬停


<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


</head>
<body>

<div id="app">
  <span v-bind:title="message">
    鼠标悬停此处几秒钟查看此处动态绑定的信息
  </span>
</div>


<!--导入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: "#app",
    data:{
      message:'页面加载于'+new Date().toLocaleString()
    }
  });
</script>

</body>
</html>

2.判断-循环


if-else语句 :

<body>

<div id="app">
    <h1 v-if="ok">yes</h1>
    <h1 v-else="ok">no</h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            ok: false
        }

    });
</script>

</body>

<body>

<div id="app">
    <h1 v-if="ok==='a'">yes</h1>
    <h1 v-else-if="ok==='b'">no</h1>
    <h1 v-else>other</h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el: "#app",
        data: {
            ok: 'c'
        }

    });
</script>

</body>

for语句：

<body>

<div id="app">
    <li v-for="item in items">
      {{item.message}}
    </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
  var vm=new Vue({
    el: "#app",
    data: {
      items: [
        {message: '邓孝慈'},
        {message: '许魏洲'}
      ]
    }

  });
</script>

</body>


posted @ 2022-03-03 20:48  卡卡发  阅读(41)  评论(0)    收藏  举报