123456789101112131415161718192021222324252627282930313233343536373839 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <!--
- 内置指令:
- 1.数据绑定的指令
- a.v-text 更新数据文本内容 innerText
- b.v-html 更新文本内容 innerHTML 可以解析html标签
- c.v-model 数据改变 视图更新 / 视图更新 数据改变 数据双向绑定
- 适用于表单里的内容
- -->
- <div id="app">
- <div v-text="text1">{{text}}</div>
- <div v-html="html1">{{html}}</div>
- <input type="text" v-model="input1">
- 输入值:{{input1}}
- </div>
- <script src="../vue.js"></script>
- <script>
- var app = new Vue({
- el:"#app",
- data:{
- text: "文字1",
- html: "文字2",
- text1:"<b>今天天气真好</b>",
- html1: "<b>开学了</b>",
- input1: ""
- },
- methods: {
- },
- })
- </script>
- </body>
- </html>
|