v-bind，v-if，v-else，v-show，v-for的简单使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app">{{message}} <!-- 动态的绑定id，使用v-bind:id="message"，也可简写为:id="message" --> <!-- 此时id就会绑定为hello world --> <div :id="message"></div> <!-- v-if的使用，如果v-if的条件是false，则该节点是不会被渲染的 --> <ul> <li> <span v-if="!item.del">{{item.title}}</span> <span v-else style="text-decoration: line-through;">{{item.title}}</span> <!-- v-show的使用，该节点会被渲染，只是不会展示 --> <button v-show="!item.del">删除</button> </li> </ul> <ul> <!-- v-for循环的使用 --> <li v-for="item in list"> <span v-if="!item.del">{{item.title}}</span> <span v-else style="text-decoration: line-through;">{{item.title}}</span> </li> </ul> </div> <!-- 使用vue有两种方式，一种是引用cdn地址，一种是npm安装 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: 'hello world', item: { title: '语文', del: true }, list: [ { title: '语文', del: false }, { title: '数学', del: true }, { title: '英语', del: true } ] } }) </script> </body> </html>