标签:list color hello default name click temp jlist console
<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用于绑定输入框.
应该是这样.
Vue.js 的v-for, v-html v-bind, v-show 实例
标签:list color hello default name click temp jlist console
原文地址:https://www.cnblogs.com/Montauk/p/10062529.html