VUE 小demo

最新推荐文章于 2023-01-08 15:13:02 发布

他是信仰

最新推荐文章于 2023-01-08 15:13:02 发布

阅读量159

点赞数

本文链接：https://blog.csdn.net/weixin_42634971/article/details/89674255

版权

VUE 小demo

先来一个vue的复选框

<body>
  <div id="app">
  <div>
  <input type="checkbox" v-model="result" id="html" value="html"/>
  <label for="html">Html</label>
  </div>
  <div>
  <input type="checkbox" v-model="result" id="css" value="css"/>
  <label for="css">css</label>
  </div>
  <div>
  <input type="checkbox" v-model="result"  id="java" value="java"/>
  <label for="java">java</label>
  </div>
  <p>当前选择{{result}}</p>
  </div>
  <script src="vue.js"></script>
  <script>
   var app=new Vue({
    el:"#app",
    data:{
     result:[
      "html","css","java"
     ]
    }
   })
  </script>
 </body>

下拉框单选

<body>
  <div id="app">
  <select v-model="result">
   <option value ="html">HTML</option>
   <option value ="js">JS</option>
   <option value ="css">CSS</option>
  </select>
  <p>当前选择{{result}}</p>
  </div>
  <script src="vue.js"></script>
  <script>
   var app=new Vue({
    el:"#app",
    data:{
    result:"js"
    }
   })
  </script>
 </body>

下拉框多选

<body>
  <div id="app">
  <select v-model="result" multiple>
   <option value ="html">HTML</option>
   <option value ="js">JS</option>
   <option value ="css">CSS</option>
  </select>x
  <p>当前选择{{result}}</p>
  </div>
  
  <script src="vue.js"></script>
  <script>
   var app=new Vue({
    el:"#app",
    data:{
    result:["js","html"]
    }
   })
  </script>
 </body>

vue组件

Demo1

<body>
  <div id="app">
  <dsj-btn></dsj-btn>
  <dsj-btn></dsj-btn>
  <dsj-btn></dsj-btn>
  </div>
  <script src="vue.js"></script>
  <script>
   //创建组件
   Vue.component("dsj-btn",{
    template:"<button @click='handClick'>{{count}}</button>",
    data:function(){
     return{
      count:0
     };
    },
    methods:{
     handClick:function(){
      this.count++;
     }
    } 
   });
   //初始化
   var app=new Vue({
    el:"#app"
   })
  </script>
 </body>

Demo2

<body>
  <div id="app">
   用户角色
  <dsj-select-list :items="roles"></dsj-select-list>
  商品分类
  <dsj-select-list :items="types"></dsj-select-list>
  </div>
  <!-- 定义模板 -->
  <template id="tp">
   <select>
    <option value ="-1">请选择</option>
    <option v-for="item in items" :value="item.id">{{item.name}}</option>
   </select>
  </template>
  <script src="vue.js"></script>
  <script>
   //创建组件
   Vue.component("dsj-select-list",{
    props:["items"],
    template:"#tp" 
   });
   //初始化
   var app=new Vue({
    el:"#app",
    data:{
     //用户角色
     roles:[
      {id:1,name:"用户"},
      {id:2,name:"普通用户"}
     ],
     //商品分类
     types:[
      {id:1,name:"数码"},
      {id:2,name:"零食"},
      {id:3,name:"用户"},
      {id:4,name:"生活用品"}
     ]
    }
   })
  </script>
 </body>

他是信仰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
VUE 小demo

VUE 小demo先来一个vue的复选框<body> <div id="app"> <div> <input type="checkbox" v-model="result" id="html" value="html"/> <label for="html">Html</label> </div...
复制链接

扫一扫