Vue按钮绑定数据,触发点击事件后,按钮数据不变?

我是一个Vue的初学者,今天在看关于v-once的时候,使用按钮绑定一个数据,

点击按钮后v-once绑定后的数据没发生变化,可是按钮本也没有发生变化?我又绑定了一个新按钮,点击这个新按钮,上一个按钮的数据发生变化

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

<div id="app2">
    <!-- 测试按钮,绑定了数据,点击后text不更新 -->
  <button @click="change">{{text}}</button>
    <p v-once>{{text}}</p>
    <p>{{text}}</p>
    <!-- 新按钮,点击后测试按钮{{text}}更新 -->
<button @click="change">新按钮</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
     new Vue({
         el:'#app2',
         data:{
             text:'测试用的数据'
         },
         methods:{
             change:function(){
                 this.text='啊真爱上了阿强';
             }
         }
     })
</script>

你期待的结果是什么?实际看到的错误信息又是什么?

我本来以为点击测试按钮后只有v-once绑定的数据不发生改变,其余的都发生改变。
可是点击后,发现测试按钮没有发生变化,因为我是初学者,不理解,希望得到大神的指点,谢谢

clipboard.png

阅读 9.7k
2 个回答

复制了一下你的代码 完全没问题啊?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app2">
        <!-- 测试按钮,绑定了数据,点击后text不更新 -->
      <button @click="change">{{text}}</button>
        <p v-once>{{text}}</p>
        <p>{{text}}</p>
        <!-- 新按钮,点击后测试按钮{{text}}更新 -->
    <button @click="change">新按钮</button>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
         new Vue({
             el:'#app2',
             data:{
                 text:'测试用的数据'
             },
             methods:{
                 change:function(){
                     this.text='啊真爱上了阿强';
                 }
             }
         })
    </script>
</body>
</html>

clipboard.png

那你是想让那个改变啊 现在你只是要出发change事件除了绑定v-once的其余的是多会改变成 "啊真爱上了阿强" 这样式不对的吗, 不是你想象的?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题