- <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>
以上是 App.vue 的内容
v-bind 多半用于标签 < a > 的属性绑定, v-model 用于绑定输入框.
应该是这样.
来源: http://www.bubuko.com/infodetail-2871867.html