HTML简单实现v-if与v-for与v-model-Toy模板网

这篇具有很好参考价值的文章主要介绍了HTML简单实现v-if与v-for与v-model。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vue启动！！

首先VIewModel将View和Model连接一起，Model的数据改变View的数据也变
使用Visual Studio Code
启动Vue需要vue.js插件和导入CDN(包)
vue.js插件：CTRL + shift + x 在搜索栏搜
索vue.js安装即可
CDN： https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js
VS创建一个.html的文件

<div id="app">
       {{message}}
   </div>
   <script>
     let vn = new Vue ({
       el: "#app",//el为元素的意思,选取id选择器
         //data更改数据
       data: {
       message: "Vue启动"
       }
     });
   </script>

< div>< /div>块为view层（模板）
< script>< /script>块为Model层（数据）
ViewModel的体现：在浏览器的控制面板（Console),输入
```
vn.massage = "原神启动"
```
ViewModle的双向绑定，网页随机刷新。
bind等被称为指令，指令前面有前缀v-,表示Vue的特殊特性，该指令的意思是：将元素节点的title特性和Vue的实列massage属性统一起来

vue的循序结构
- if的条件判断

<div id="app">
       <h1 v-if="type==='A'">A</h1>
       <h1 v-else-if="type==='B'">B</h1>
       <h1 v-else-if="type==='D'">D</h1>
       <h1 v-else>C</h1>
    </div>
    <script>
        let vm = new Vue ({
            el: "#app",
            data: {
                type: 'A'
            }
        });
    </script>

for循环语句，与foreach()结构相似
输入的数据框中[ { } , { } , { } ]用于输入多组数据
v-model指令在表单< input>,< textarea>,< select>在元素上创建双向数据绑定，它赋值监听用户输入事件来更新数据，

<div id="app">
    //输入的文本： <textarea v-model = "message"/>{{message}}
    //输入的文本： <textarea name="" cols="20" rows="10" v-model="message"></textarea>{{message}}
        输入的文本： <input type="text" v-model = "message">{{message}}
        //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                message: "123"
            }
        });
    </script>

以下案例用v-model指令对事件进行监听文章来源地址https://www.toymoban.com/news/detail-736854.html

<div id="app">
        输入的文本： <input type="radio" name="sex" value="男" v-model="xiaoming">男
                    <input type="radio" name="sex" value="女" v-model="xiaoming">女
        //{{message}}用于输出用户看到的数据。其数据随文本框数据的改变而改变
        <p>
            选中了谁：{{xiaoming}}
        </p>
    /*
        选择框：
        <select v-model="select">
            <option value="disabled">--请选择--</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select> 
    */
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                xiaoming: "123"
                //select: ""
            }
        });
    </script>

到了这里，关于HTML简单实现v-if与v-for与v-model的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！