vue的引入。v-text,插值,v-html,v-bind,v-model,v-on,v-for,v-if的使用

ttwtn

已于 2022-05-09 08:25:59 修改

阅读量539

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-08 18:32:24 首次发布

本文链接：https://blog.csdn.net/qq_41887317/article/details/124651735

版权

在前端项目中引入vue

1 下载vue.js https://download.csdn.net/download/qq_41887317/85322072

2 在项目中引入vue，注意src中路径，应该写自己项目中的路径

<script src="../js/vue.js"></script>

使用vue

1 v-text="变量名可以让标签中文本内容，跟变量绑定在一起。h1标签不起作用，显示文本

<body>
    <p v-text="content"></p>
    <script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            content:"v-text显示内容<h1>李白</h1>"
        }
    })
</script>
</body>

2 {{变量名}} 插值，可以让此处的文本内容跟变量绑定在一起

<body>
<div>
    {{content}}
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            content:"差值，显示内容"
        }
    })
</script>
</body>

3 v-html="变量名" 可以让标签中文本内容，跟变量绑定在一起。h1标签起作用

<body>
<div>
    <p v-html="content"></p>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            content:"v-html显示内容<h1>李白<h1>"
        }
    })
</script>
</body>

4 v-bind:属性名="变量名" 或者可省略 v-bind，直接用：属性名="变量名"。属性值跟变量绑定

<body>
<div>
    <input type="text" v-bind:value="inputvalue">
    <a :href="url">京东</a>
</div>

<script src="../js/vue.js"></script>
<script>

    let v = new Vue({
        el:"div",
        data:{
            inputvalue:"属性绑定设置",
            url:"http://www.jd.com",
        }
    })

</script>

5 v-model 双向绑定，from表单控件才有。当控件值(v-model value)变化，变量值也发生变化。反之变量值发生变化，控件值发生变化。

当在输入框输入内容，<h1>中内容也发生相应变化

<body>
<div>
  <input type="text" v-model = "content"  >
  <h1>{{content}} </h1>
</div>

<script src="../js/vue.js"></script>

<script>
  let v = new Vue({
    data:{
      content:"v-model双向绑定",
    }
  })
</script>
</body>

6 v-on:事件名="方法名"。事件绑定。也可用简写 @事件名="方法名"

<body>
<div>
    <input type="button" value="button1" v-on:click="f1()">
    <input type="button" value="button2" @:click="f()">
</div>
<script>
    let v = new Vue({
        el:"div",
        methods:{
            f1 (){
                //方法1内容
            },
            f2(){
                //方法2内容
            }
        }
    })
</script>

</body>

7 v-for=(变量名 in 数组)，遍历数组并且生成新标签

<body>
<div>
    <table border="1">
        <tr v-for="(para,i) in arr">
            <td>{{i+1}}</td>
            <td>{{para.name}}</td>
        </tr>
    </table>
</div>
<script>
    let v = new Vue({
        el:"div",
        data:{
            arr:[{name:"a"},
                {name:"b"},
                {name:"c"}]
        }
    })
</script>

8 v-if="变量名" ，变量=true时显示标签，false时删除标签

v-else 跟v-if结合使用，相当于if-else

v-show="变量名"，变量=true，显示标签，false隐藏标签

<body>
    <div>
        <h1  v-if="isVisible">a</h1>
        <h1  v-else>b</h1>
        <h1  v-show="isVisible">c</h1>
    </div>

<script>
    let v = new Vue({
        el:"div",
        data:{
            isVisible:false
        }
    })
</script>
</body>

ttwtn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的引入。v-text,插值,v-html,v-bind,v-model,v-on,v-for,v-if的使用

在前端项目中引入vue1 下载vue.js https://download.csdn.net/download/qq_41887317/853220722 在项目中引入vue，注意src中路径，应该写自己项目中的路径<script src="../js/vue.js"></script>使用vue1 v-text="变量名可以让标签中文本内容，跟变量绑定在一起。h1标签不起作用，显示文本<body> <p ...
复制链接

扫一扫