watch这个没懂，是什么意思，是在干啥？

最新推荐文章于 2022-04-02 16:57:45 发布

hamimelon2020

最新推荐文章于 2022-04-02 16:57:45 发布

阅读量201

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_40945354/article/details/115395865

版权

vue 专栏收录该内容

722 篇文章 4 订阅

订阅专栏


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
    <div id="watch-example">
        <p>
          Ask a yes/no question:
          <input v-model="question" />
        </p>
        <p>{{ answer }}</p>
      </div>
 

<script>
  const watchExampleVM = Vue.createApp({
    data() {
      return {
        question: '',
        answer: 'Questions usually contain a question mark. ;-)'
      }
    },
    watch: {
      // whenever question changes, this function will run
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },
    methods: {
      getAnswer() {
        this.answer = 'Thinking...'
        axios
          .get('https://yesno.wtf/api')
          .then(response => {
            this.answer = response.data.answer
          })
          .catch(error => {
            this.answer = 'Error! Could not reach the API. ' + error
          })
      }
    }
  }).mount('#watch-example')
</script>


    <style>
        .demo {
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}
    </style>
</body>
</html>

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
watch这个没懂，是什么意思，是在干啥？

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue的方法_侠课岛(9xkd.com)</title><script src="https://unpkg.com/vue@next"></script><script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axio.
复制链接

扫一扫

专栏目录