三、用户输入颜色，动态改变字体颜色

//html代码
  <li class="liMenu" :class="idx === index ? color : ''"
  @click="son(item, idx)" 
  v-for="(item, idx) in items" :key="idx">
  {{ item }}
  <input type="text" v-model="color" />
//js代码
 data() {
      return {
        items: ['第一个', '第二个', '第三个'],
        index: 0,
        color: 'red',
    methods: {
        son(item, idx) {
        this.index = idx;
        console.log(this.color);
//css代码
.red { color: red; }
.blue { color: blue; }
实现效果：当用户输入red时，点击的li变成红色；用户输入blue时，点击的li变成蓝色
  
分类：
 前端
 
标签：
 
Vue.js
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装