vue入门（一）

最新推荐文章于 2024-09-22 11:17:00 发布

weixin_34354945

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000010019152

版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>hello-vue</title>
    </head>

    <body>
        <div id="app">
            姓： <input type="text" name="" id="" value="" v-model="firstName" />
            <hr />
            名： <input type="text" name="" id="" value="" v-model="lastName" />
            <hr />
            结果：{{firstName + lastName}}
            <hr />
            <h1>管理食物</h1>
            <div class="">
                <span>添加食物:</span>                
                    <input @keyup.enter="add" v-model="text" placeholder="What food?" autofocus="autofocus"/>
            </div>
            <ul>
                <li v-for="food in foods">
                    <input type="checkbox" name="" id="" value="" v-model="food.complate"/>
                    {{ food.text }}
                    <button @click="destroy(food.text)">删除</button>
                </li>
            </ul>
        </div>
        
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <!--引进vue.js，当前环境就会多出一个Vue全局变量-->
        <script type="text/javascript">
            (function(window){
                foods = [{text:'辣条',complate:true},{text:'香蕉',complate:false},{text:'苹果',complate:true}];
                var app = new Vue({
                    el: '#app',
                    data: {
                        firstName: 'hu',
                        lastName: 'sheng',
                        foods: foods,
                        text:''
                    },
                    methods:{
                        f:function(){
                            window.alert("aa");
                        },
                        add:function(){
                            if(this.text.trim().length === 0){
                                return
                            }
                            this.foods.push({
                                text:this.text,
                                complate:false
                            });
                            this.text = '';
                        },
                        destroy:function(text){
                            console.log(text);
                            var foodIndex;
                            this.foods.find(function(food,index){
                                if(food.text===text){
                                    foodIndex = index;
                                }
                            });
                            this.foods.splice(foodIndex,1);
                        }
                    }
                });
            })(window);
        </script>
    </body>
<!--
    笔记：
    1，v-on:可以简写为@
    
-->
</html>

weixin_34354945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫