Vue 指令

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hanxiangmin/p/11330838.html

文章标签：

#javascript #ViewUI

下面列举VUE的HTML页面模板指令，并进行分别练习。

1. templates

2. v-if,

v-for

<div id='app'>
  <ol>
     <li v-for="todo in todos'>
        {{ todo.text}}
     </li>
  </ol>
</div>

<script>
app = new Vue({
  el: '#app',
  data: {
    return {

todos = [
  {text: "First todo item"},
  {text: "Second todo item"},
  {text: "Third todo item"}
]

}

  }
});
</script>

3. v-onclick

<div id='app'>
     {{ message }}
     <button v-onclick="reverseMessage">Reverse Message </button>
</div>

<script>
app = new Vue({
  el: '#app',
  data: {
    return {
       message: "hello vue!",
    }
  },
  methods: {
    reverseMessage: function(){
      return this.message.split("").reverse().join("");
    }
  }
});
</script>