使用 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>
效果
