腾讯课堂第一课

 

 

使用  vm.title 获取值

vm.title="我是其他值"    页面也会跟着变化    (可以在console里面敲页面也会变，vue的响应式)

vm.$data.title 这个写法也可以

 

 

 

第二个demo<!DOCTYPE html><html>

    
<div id="app">
    <h1>
        {{title}}
    </h1>
    <p>
        <!--双向绑定使用v-model  绑定数据newProduct.name 值-->
        名称: <input type="text" v-model="newProduct.name"> 
        库存: <input type="number" v-model="newProduct.stock">
        <!--@click事件，点击触发addProduct()函数逻辑 -->
        <button @click="addProduct()">添加</button>
        
    <ul>
　　　　　<!-- 循环遍历数组的方法 -->
        <li v-for="(item,i) in products" :key="i">
        {{item.name}}
        库存: {{item.stock}}
　　　　　<button @click="handleDelete(name)">删除</button>
        </li>
    </ul>
</div>

<script src="/vue/vue.js" ></script>
<script type="text/javascript">
var vm = new Vue({
    //配置
　　el : "#app",//配置模版
　　data : {  
    //配置数据
    title: "商品管理",
    newProduct:{
        name:"",
        stock:"",
    },
    products:[
        { name: "iPhone" , stock: 10},
        { name: "xiaomi" , stock: 5},
        { name: "huawei" , stock: 0},
    ]
    },
    //创建函数 写在methods里面
    methods:{

　　　　//删除数组

　　　　handleDelete(i){
　　　　　　this.products.splice(i,1);
　　　　},


        addProduct(){
            //往数据里面添加对象用push
            this.products.push({
                name:this.newProduct.name,
                stock:this.newProduct.stock,
                })}
            }
    });
     
</script>

 

效果

 

posted @ 2020-07-07 01:02  凯宾斯基  阅读(151)  评论(0)  编辑  收藏  举报