Vue模板语法

最新推荐文章于 2023-03-27 20:54:26 发布

lss_love

最新推荐文章于 2023-03-27 20:54:26 发布

阅读量309

点赞数 1

分类专栏： Vue 文章标签： vue filter javascript

本文链接：https://blog.csdn.net/qq_41011626/article/details/114591798

版权

这篇博客详细介绍了Vue模板语法，包括插值语句的使用，v-bind指令及其简写形式，支持的表达式类型，v-if、v-model和v-on指令的解释及简写，以及过滤器的基本应用和串联使用。通过实例展示了如何在Vue中操作数据和响应用户事件。

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

学习内容：

Vue模板语法

学习时间：

2021.3.09

学习产出：

1.插值语句

插值语句可以用{ {}}来直接进行赋值，你赋的值是什么，就显示什么；如果想让你赋的标签值起作用的话可以使用v-html指令进行修饰！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两种插值语句</title>
    <script src="vue.min.js"></script>
</head>

<body>
    <div id="lss">
        <!--最基本的{
   {}}形式的插值，与Vue实例中的message对应-->
        {
  {message}}
        <!--使用v-html标签，可以将Vue实例中标签语句执行，对应Vue实例中的message1-->
        <div v-html="message1"></div>
    </div>
</body>
<script>
    var vm = new Vue({
    
        el: '#lss',
        data: {
    
            message: 'Hello Vue!',
            message1: '<h1>hhh</h1>'
        }
    })
</script>

</html>

2.v-bind指令

这里的v-bind指令绑定了class1样式，是否启用由use的值来控制，use初始值为false。所以calss1不生效，点击复选框之后，use的值被更改为true，class1样式被启用;
其简写格式为：（其简写就是冒号）比如：v-bind:class="{‘class1’: use}“就可以简写为 :class=”{‘class1’: use}"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<style>
    .class1 {
    
        background: #444;
        color: #eee;
    }
</style>

<body>
    <div id="app"&