vue.js 声明式渲染(字符串&&方法点击)

最新推荐文章于 2024-05-01 11:45:00 发布

sl21910610

最新推荐文章于 2024-05-01 11:45:00 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/sl21910610/article/details/80494666

版权

声明的方式：

<div id='app'>
{{messageTest}}
</div>

export default{
name='app',//el:'#app'
    data(){
        return {
          messageTest:"12345"
        }
    }
}

方法声明与实现：

<div id=''app>
    <button. v-on:click="fun">ButtonTitle</button>
    {{messageTest}}
</div>
<script>
    export default{
    name='app',
    data(){
        return{
            messageTest:"123467"
        }
    },
    methods:{
        fun:function(){
            this.messageTest="3421";
        }
    }
}
</script>

整体代码：

<div id='app'>
{{messageTest}}
</div>
<script>
export default{
name='app',//el:'#app'
    data(){
        return {
          messageTest:"12345"
        }
    }
}
</script>
<style>
#app{
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>