vue 基本语法写的一个小demo

最新推荐文章于 2021-12-13 17:19:16 发布

原创最新推荐文章于 2021-12-13 17:19:16 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue小例子 #Vue的基本语法实例

vue基本语法例子专栏收录该内容

3 篇文章

订阅专栏

在公众号学习实现的

需要下载一个vue2.0的js,即可

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		 <meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>例子demo</title>
    <style>
          
     .edit{
        display:block ;
        width:80%;
        height: 35px;
        line-height: 35px;
        margin: 30px auto;
        box-sizing: border-box;
        padding-left: 4px;
        border-radius: 4px;
        border:1px solid #ccc;
        outline: 0;
        box-shadow: 0 0 5px #ccc;
     }
       .list{
        margin: 0 auto;
        width:80%;
     }
 .unit{
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #efefef;
 }
 .unit:last-child{
    border-bottom: 0;
 }
  .finish{
    text-decoration: line-through;
    color: #ccc;
 }
 .del{
    background: red;
    text-decoration: none;
    position: absolute;
    right:0;
    font-size: 12px;
    border: 0;
    outline: 0;
    padding: 2px 5px;
    border-radius: 5px;
    color: #fff;
 }
  .empty{
    font-size: 13px;
    color: #ccc;
    text-align: center;
    padding: 10px 0;
 }
 
    </style>
	</head>
	<body>
		<div id="app">
        <input 
        class="edit" 
        type="text"
        v-model="task.content"
        placeholder="编写任务"
        name="" id=""
        @keydown.enter = "addTask"
        >
        <div class="list">
            <div class="unit" 
                 v-for="(item,index) in list">
                <input
                  @click="changeState(index)"
                  :checked="item.finished"
                 type="checkbox"
                 >
                <span :class="{'finish':item.finished}">
                  {{item.content}}
                </span>
               <button @click="removeTask(index)" 
                class="del">
                  删除
                </button>
            </div>
            <p v-if="list.length === 0" class="empty">暂无任务</p>
        </div>
    </div>
 
		<script src="js/vue.js"></script>
		<script type="text/javascript">
         const app = new Vue({
            el:"#app",
            data:{
              //默认
           
            task:{
              content:'',  //内容为空
              finished:false,  //未完成
              deleted:false   //未删除
            },

            //任务列表
            list:[]

             },
             methods:{
                //添加任务
                addTask:function(){
                  //将task存入到list数组
                  this.list.push(this.task);
                  //存入list[],后重置task
                   this.task = {
                  content:'',  //内容为空
                  finished:false,  //未完成
                  deleted:false   //未删除
                }
                },
                //循环的任务 是否完成
                changeState:function(index){
                  let curState = this.list[index].finished;
                  this.list[index].finished = !curState;
                },
                //任务的删除  与否
                removeTask:function(index){
                  //使用splice操作删除数组指定项
                  this.list.splice(index,1);
              }
             }
      });


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