Vue.js 的v-for, v-html v-bind, v-show 实例

<template> ???<div> ???????<ComponentA v-for="(value,key) in fruitList" :key="key"></ComponentA> ???????<ul> ???????????<li v-for="(item,index) in fruitList">{{index}}: {{item.name}} : {{item.price}}</li> ???????</ul> ???????<ul> ???????????<li v-for="(index, key,value) in fruitList">{{index}}: {{key}} : {{value}}</li> ???????</ul> ???????<p v-for="item in fruitList"></p> ???????<p v-html="withHtml"> ???????????{{hello}}<br> ???????????this is from app2.vue, maybe will import by some js; ???????</p> ???????<button @click="addItem">按我</button> ???????<button @click="changeItem">按我+1</button> ???????<a :href="link">动态绑定</a> ???????<a :class="classBind">动态绑定通常用于绑定class</a> ???????<a class="link" :class="classArrayBind">动态绑定也可在绑定class的时候使用数组或者对象</a> ???????<a :class="hasError?classArrayBind[0]:classArrayBind[1]">动态绑定的条件判断</a> ???????<a :style="styleExample">绑定样式表</a> ???????<button @click="changeColor">换颜色</button> ???????<button @click="changeShow">看见?</button> ???????<a v-show="ifShow">你看见我了</a> ???</div></template><script> ???import Vue from ‘vue‘ ???import ComponentA from ‘./components/a‘ ???export default { ???????//渲染一个子component ???????components: { ???????????ComponentA: ComponentA ???????}, ???????data() { ???????????return { ???????????????classArrayBind: [{ ???????????????????????classA: ‘red‘ ???????????????????}, ???????????????????{ ???????????????????????classB: ‘green‘ ???????????????????} ???????????????], ???????????????styleExample: { ???????????????????‘font-size‘: ‘20px‘, ???????????????????‘color‘: ‘red‘ ???????????????}, ???????????????hasError: false, ???????????????ifShow: true, ???????????????classBind: ‘redFont‘, ???????????????link: ‘http://www.baidu.com‘, ???????????????hello: ‘world‘, ???????????????word: ‘this is from app2.vue, maybe will import by some js;‘, ???????????????withHtml: ‘<i>this is about i</i>‘, ???????????????//渲染数组 ???????????????fruitList: [{ ???????????????????????name: ‘apple‘, ???????????????????????price: 34 ???????????????????}, ???????????????????{ ???????????????????????name: ‘banana‘, ???????????????????????price: 56 ???????????????????}, ???????????????], ???????????????//渲染对象 ???????????????objList: { ???????????????????name: ‘apple‘, ???????????????????price: 345, ???????????????} ???????????}; ???????}, ???????methods: { ???????????addItem: function() { ???????????????//console.info(this.fruitList) ???????????????this.fruitList.push({ ???????????????????name: ‘peach‘, ???????????????????price: 30 ???????????????}) ???????????}, ???????????changeItem: function() { ???????????????Vue.set(this.fruitList, 1, { ???????????????????name: ‘pineapple‘, ???????????????????price: 999 ???????????????}) ???????????????this.fruitList[0].price = this.fruitList[0].price + 1 ???????????}, ???????????changeColor: function() { ???????????????this.styleExample.color = ‘green‘ ???????????}, ???????????changeShow: function() { ???????????????this.ifShow = !this.ifShow ???????????} ???????} ???}</script><style></style>