Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console

最新推荐文章于 2024-07-23 15:04:40 发布

618GLOAL_COOK2237

最新推荐文章于 2024-07-23 15:04:40 发布

阅读量3.5k

点赞数 2

分类专栏： Vue

本文链接：https://blog.csdn.net/GLOAL_COOK/article/details/113839079

版权

本文详细介绍了Vue.js中的常用指令，包括v-text、v-html、v-model、v-on（@）、v-for、v-if/v-else/v-show、v-bind、v-bind:class、计算属性computed和监听watch。内容涵盖各个指令的用法、示例和常见场景，帮助开发者深入理解Vue.js指令系统。

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

一.指令

什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。

二、v-text和v-html

使用v-text和v-html指令来替代 { {}}
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染 在这里插入图片描述 vue_day1/03_v-textandv-html.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo3</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app3">

    v-text:<span v-text="msg"></span><br>
    v-html:<span v-html="msg"></span><br>

</div>
<script type="text/javascript">
    var app1=new Vue({
    
        el:"#app3",   //el即element，要渲染的页面元素
        data:{
    
            msg:"<h2>hello vue!</h2>"
        },
    });
</script>
</body>
</html>

效果：
在这里插入图片描述

三、v-model

在这里插入图片描述
vue_day1/04_model.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app4">

    <input type="checkbox" value="java" v-model="language">Java1<br>
    <input type="checkbox" value="php" v-model="language">php1<br>
    <input type="checkbox" value="python" v-model="language">python1<br>

    <h2>
        你选择了：{
  {language.join(",")}}
    </h2>
</div>
<script type="text/javascript">
    var app1=new Vue({
    
        el:"#app4",   //el即element，要渲染的页面元素
        data:{
    
            language:[]
        },
    });
</script>
</body>
</html>

效果：
在这里插入图片描述
多个 checkbox 对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型
radio对应的值是input的value值 input 和 textarea 默认对应的model是字符串
select 单选对应字符串，多选对应也是数组

四、v-on（可用@代替）

v-on指令用于给页面元素绑定事件。
语法：v-on:事件名=“js片段或函数名”(就是后面可接表达式或者函数)

简写语法（常用）：
@事件名=“js片段或函数名”
例如 v-on:click=‘add’ 可以简写为 @click=‘add’

4.1 事件修饰符

在这里插入图片描述

代码演示上述：

最低0.47元/天解锁文章

618GLOAL_COOK2237

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Vue常用指令：v-text、v-html、v-model、v-for、v-if、v-else、v-show、v-bind、v-bind:class、computed、watch、console

一.指令什么是指令？指令 (Directives) 是带有 v- 前缀的特殊属性。例如在入门案例中的v-model，代表双向绑定。二、v-text和v-html使用v-text和v-html指令来替代 {{}}说明：v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染vue_day1/03_v-textandv-html.html：<!DOCTYPE html><ht
复制链接

扫一扫

专栏目录