huanggr
Vue作为前端的3大框架之一，学习还是很有必要的，下面我们就使用Vue来制作一个选中那些按钮，按钮所代表的值就显示的效果。
1.按钮实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="app"> <label>Html+Css:<input type="checkbox" value="Html+Css" v-model='message' /></label> <label>Vue:<input type="checkbox" value="Vue" v-model='message' /></label> <label>Js:<input type="checkbox" value="Js" v-model='message' /></label> <p>{{message}}</p> </div> <script type="text/javascript"> new Vue({ //绑定元素 el:"#app", //设置该元素下面的所有的按钮为不选中状态 //使用v-model来进行双向绑定，达到同步更新的效果 data:{ checked:false, message:[] } }) |
2.Vue中的组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="app"> <!-- 双向绑定 --> <input v-model="content"> <!-- v-bind绑定，这里的content和data中的是相同的 --> <my-component v-bind:message='content'></my-component> </div> <script type="text/javascript"> Vue.component('my-component',{ // 用于组件通信，子组件接受父组件的信息 props:['message'], template:'<h1>{{message}}</h1>' }) new Vue({ el:'#app', data:{ content:'111' } }) </script> |
7