vue 比 js的强大

//js写留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用原生js实现留言板功能</title>
    <style type="text/css">
      div{
          background-color: #dae3ff;
      }
    </style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
    <h4>留言板</h4>
        <div id="app">
            <input type="text">
            <button>提交</button>
            <ul></ul>
        </div>
<script>
    let input=document.querySelector("input");
    let button=document.querySelector("button");
    let ul=document.querySelector("ul");

    button.onclick=function () {
        //创建新元素
        let li=document.createElement('li');

        //添加元素
        li.innerHTML=input.value;

        //将新元素添加到页面中
        //ul.appendChild(li);
        //判断当前列表是否为空，空则直接加，非空则插到前面
        if(ul.children.length===0){
            ul.appendChild(li);
        }else{
            let first=ul.firstElementChild;
            ul.insertBefore(li,first);
        }

        //清空input的内容
        input.value='';

    }
</script>
</body>
</html>

//Vue写留言板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用Vue快速制作一个留言板</title>
    <style type="text/css">
        div{
            background-color: #dae3ff;
        }
    </style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
<h4>留言板</h4>
<div id="app">
    <input type="text" v-model="input" placeholder="输入">
    <button @click="fill">提交</button>
    <ul>
        <li v-for="item in li">{{item}}</li>
    </ul>
</div>
<script src="../vue.js"></script>
<script>
    let vm=new Vue({
       el:'#app',
       data:{
           input:'',
           li:[]
       },
        methods:{
           fill:function () {
               //this.li.push(this.input);//push添加

               //头部添加
               this.li.unshift(this.input);

               //清空留言区
               this.input='';

           }
        }
    });
</script>
</body>
</html>


posted on 2020-03-10 16:01  晓晓的明星  阅读(606)  评论(1)    收藏  举报

导航