Skip to content

Instantly share code, notes, and snippets.

@zyzsdy

zyzsdy/vue_test_1.html

Last active December 6, 2015 11:07
Show Gist options
  • Save zyzsdy/b9059ccffb54ef981421 to your computer and use it in GitHub Desktop.
Save zyzsdy/b9059ccffb54ef981421 to your computer and use it in GitHub Desktop.
Download ZIP
用Vue.js实现的两个根据输入实时显示颜色的Web App。
Raw
vue_test_1.html
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="vue.min.js"></script>
<style>
body{
margin: 0;
}
.out{
display: flex;
flex-direction: row;
}
.out>div{
flex: 1;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
input{
font-size: 40px;
text-align: center;
background: transparent;
border: none;
}
</style>
</head>
<body>
<section class="out">
<div id="s-l" style="background-color: {{ color }}"><input v-model="color" style="color: {{font_color}}"></div>
<div id="s-r" style="background-color: {{ color }}"><input v-model="color" style="color: {{font_color}}"></div>
</section>
<script>
function fontColor(color){
color = color.substring(1);
switch(color.length){
case 3: return parseInt(color, 16) <= 0x7ff;
case 6: return parseInt(color, 16) <= 0x7fffff;
default: return false;
}
}
function vueFactory(n_id, n_color){
return new Vue({
el: n_id,
data: {
color: n_color,
},
computed: {
font_color: function(){
return fontColor(this.color) ? "#FFFFFF" : "#000000";
}
}
})
}
vueFactory("#s-l", "#000000");
vueFactory("#s-r", "#FFFFFF");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment