Vue.js第一天学习笔记（数据的双向绑定、常用指(2)

<script> export default { components: { }, ready: function(){ }, methods: { }, data() { return { labelShowFlag:true, testData:{ id:'1', name:'张三', age:'18' }, items: [{ message: '豆豆' }, { message: '毛毛' }], } } } </script>

v-bind指令：

v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:class

html：

<label v-bind:class="{'pink-label': labelShowFlag}" >我是粉色的</label> <label>默认</label>

v-on指令:

v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click;

html：

<input type="button" value="提交" @click='saveFun'>

js:

<script> export default { components: { }, ready: function(){ }, methods: { saveFun:function(){ alert('提交'); } }, data() { return { labelShowFlag:true, testData:{ id:'1', name:'张三', age:'18' }, items: [{ message: '豆豆' }, { message: '毛毛' }], } } } </script>