Question

这里我想随机更改每个文字字符的CSS。就像我输入 Stack 一样，我会在输入字段的底部显示红色，蓝色，绿色等等。

var myModel = {
	name: "Mayur",
};

var myViewModel = new Vue({
	el: '#my_view',
	data: myModel
});

span{
color:green;
font-weight:600;
font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

<div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name" />
  <p>Welcome, <span>{{ name | uppercase }}</span></p>
</div>

Answer 1

我还没与Vue合作过，而且我不熟悉它的内部事件和流程，但这是我用普通JavaScript制作的一个小型原型：

＆＃13;

document.querySelector('button').onclick = function (){
    let span = document.querySelector('span.letters'),
        text = span.textContent;
    span.innerHTML = '';
    Array.from(text).map(function(l){
        let color = document.createElement('span');
        color.innerHTML = l;
        color.style.color = 'rgb(' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ',' +
            randInterval(0, 255) + ')';
        span.appendChild(color);
    });
}

function randInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

＆＃13;

<div><span class="letters">STACK</span></div>

<button>Random colors</button>

＆＃13;

我故意放置了将函数中rgb()的每个值随机化的函数，因此您可以轻松地改变它（现在颜色是随机的）。如果要使颜色更深，则需要降低max值。如果您希望颜色更浅，则需要增加min s。

Answer 2

HTML：

<div>Type something here, then click on the white space beneave.</div>
<input type="hidden" id="hidden">

使用Javascript：

$("div").prop("contentEditable", true).blur(function(){
    var chars = $(this).text().split("");
    $("#hidden").val($(this).text());
    this.innerHTML = "";
    $.each(chars, function(){
        $("<span>").text(this).css({
            color: "#"+(Math.random()*16777215|0).toString(16)
        }).appendTo("div");
    });
});

的CSS：

div{
    border: 1px solid black;
    width: 400px;
    height: 20px;
    padding: 2px 3px;
    overflow: hidden;
}

您可以访问http://jsfiddle.net/DerekL/Y8ySy/进行实施！

链接中给出了html和css代码。它随机地为角色提供颜色，但可以轻松操作，或者如果你想让它们随机运行，你可以直接使用它。

如何更改输入文本的每个字符的样式

2 个答案: