Vue 双向传值基础

最新推荐文章于 2023-09-30 15:06:52 发布

fanfanking

最新推荐文章于 2023-09-30 15:06:52 发布

阅读量285

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/fanfanking/article/details/107481803

版权

本文介绍了Vue的基础知识，包括v-model的概念，它用于实现输入元素与数据的双向绑定。此外，还讨论了v-text和v-html的区别，v-text只显示纯文本，而v-html则可以解析HTML标签。接着，文章展示了如何在Vue中使用表格来显示数据，并介绍了通过点击查询按钮获取并展示数据的流程。

摘要由CSDN通过智能技术生成

vue基础认识

@{
   
    ViewBag.Title = "Index";
}

<div id="app">
    {
   {
    name }}
    <input  type="text"  v-model="name"/>
    <p v-text="name" style="background-color:aquamarine"></p>
</div>

@section scripts{
   
    <script type="text/javascript">
        var v = new Vue({
   
            el: "#app",
            data:{
   "name":"你好"}
        })
    </script>
    }

效果实现：
在text输入框里面改变值时，p标签以及{ {name}}回随之发生变化
在这里插入图片描述

v-model 是把input中的value覆盖了
v-text 被视为了一个文本框
v-html 视为了一个html的属性比如 < h1> 你好 < /h1>,在v-text中是< h1> 你好 <
/h1>，但是在v-html中是
你好

vue的显示表格

index

@{
   
    ViewBag.Title = "Index";
}
    <div id="app">

        <table class="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>名称</th>
                    <th>备注