vue入門（一）

時間 2019-12-13

標籤 vue 入門简体版

原文原文鏈接

<!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>

1. vue入門（一）
2. vue入門一
3. Vue入門（一）
4. vue入門(一)
5. Vue入門學習（一）
6. Vue初級入門(一)
7. Vue快速入門（一）
8. vue入門（一）----工程vue_sell
9. Vue框架入門學習(一)——Vue 1.0
10. 初學Vue（一） -- Vue簡單入門
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。