打分评价Demo,5颗星（copy可直接运行）

最新推荐文章于 2021-07-07 17:52:22 发布

ss-

最新推荐文章于 2021-07-07 17:52:22 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/month_ss_815/article/details/82014491

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>打分</title>
   
</head>
<style>
    .clickStar{
    	font-weight: 800;
    	font-size: 30px;
    	color: #ddd;
    }
    .red{
    	color: red;
    }
	
</style>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
    <div id="app">
    	<span class="clickStar" v-on:click='starclick(1)' v-bind:class='{red:red1}' >★</span>
    	<span class="clickStar" v-on:click='starclick(2)' v-bind:class='{red:red2}' >★</span>
    	<span class="clickStar" v-on:click='starclick(3)' v-bind:class='{red:red3}'>★</span>
    	<span class="clickStar" v-on:click='starclick(4)' v-bind:class='{red:red4}'>★</span>
    	<span class="clickStar" v-on:click='starclick(5)' v-bind:class='{red:red5}'>★</span>
    	<span>{{evaluation}}</span>
    
        
    </div>
    <script>
var vm = new Vue({
        el: '#app',
        data: {
          score:10.63,
          red1:false,
          red2:false,
          red3:false,
          red4:false,
          red5:false,
          evaluation :null,    
        },
        methods: {
        	starclick(param){
        		if(param==1){
        			this.red1=true;
        			this.red2=false;
        			this.red3=false;
        			this.red4=false;
        			this.red5=false;
        			this.evaluation="非常差";
        		};
        		if(param==2){
        			this.red1=true;
        			this.red2=true;
        			this.red3=false;
        			this.red4=false;
        			this.red5=false;
                     this.evaluation="差";
        		};
        		 if(param==3){
        			this.red1=true;
        			this.red2=true;
        			this.red3=true;
        			this.red4=false;
        			this.red5=false;
        			this.evaluation="一般";
        		};
        		 if(param==4){
        		 	this.red1=true;
        			this.red2=true
        			this.red3=true;
        			this.red4=true;
        			this.red5=false;
        			this.evaluation="好";
        		};
        		 if(param==5){
        			this.red1=true;
        			this.red2=true
        			this.red3=true
        			this.red4=true
        			this.red5=true;
        			this.evaluation="非常好";
        		};
               
              
        	},
        	
            change(str) {
                alert("点击之后");
            }
        },

    });




    </script>
</body>

</html>

ss-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
打分评价Demo,5颗星（copy可直接运行）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;打分&lt;/title&gt; &lt;/head&gt;&lt;style&gt; .clickSta
复制链接

扫一扫