Vue.js如何将span的随机数值绑定到data区域的x变量上

• 原代码问题核心是模板直接调用方法生成随机数，生成的值未同步到data的x变量，同时data初始化时调用的randomCreate方法名与实际定义的randomNumberCreate不一致属于笔误。
• 无需使用getElementById等原生DOM方法取值，Vue是数据驱动视图框架，所有状态统一维护在data中，直接操作data变量即可完成视图同步和值获取。
• 补充优化：原随机数生成逻辑Math.floor(Math.random() * 9999) + 1000会出现超过四位的数值，改为Math.floor(Math.random() * 9000) + 1000可保证生成稳定的四位随机数。

完整实现代码 #

模板部分 #

<span id="spanNum" name="number" style="font-weight:bold; font-size:2rem;">{{x}}</span>

逻辑部分 #

// 组件场景下data必须为函数返回对象，Vue根实例可直接写为data对象
data() {
  return {
    x: 0
  }
},
methods: {
  randomNumberCreate : function(){
    // 生成随机数直接赋值给响应式变量x
    this.x = Math.floor(Math.random() * 9000) + 1000
  }
},
mounted(){
  // 初始化生成随机数
  this.randomNumberCreate()
}

效果说明 #

修改完成后，span展示的内容与data中的x变量完全绑定，修改this.x会自动同步更新页面展示，需要获取当前随机数时直接取this.x即可。后续需要刷新随机数，直接调用this.randomNumberCreate()即可同时更新变量和视图。

内容的提问来源于stack exchange，提问作者Jany Fossie