Vue（五）：Vue模板语法

最新推荐文章于 2021-05-02 10:17:34 发布

dichengyan0013

最新推荐文章于 2021-05-02 10:17:34 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shamo89/p/10119513.html

版权

1.{{...}}（双大括号）

文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

2.v-html指令

用于输出 html 代码

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>hi,jacke</h1>'
  }
})
</script>

3.v-bind 指令和缩写

HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <div v-bind:class="{'class1': class1}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: true
  }
});
</script>

<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

缩写

<!-- 缩写 -->
<a :href="url">...</a>

4.JavaScript表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">Lily</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'Jacke',
    id : 1
  }
})
</script>

5.v-on指令和缩写

<div id="app">
        <p id="content">注意我的背景色</p>
        <input type="button" v-on:click="setBgColor" value='点我'/>
    </div>

    <script>
        new Vue({
            el:'#app',
            methods:{
                setBgColor:function(){
                    document.getElementById('content').style.background='red';
                }
            }
        })
    </script>

缩写

<!-- 缩写 -->
<a @click="doSomething">...</a>

6.v-model双向数据绑定

<div id="app">
    {{message}}
    <input type="text" v-model="message" />
</div>
    
<script>
 new Vue({
     el:"#app",
    data:{
        message:"hello"
    } 
 })
</script>

7.自定义过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

示例，

<div id="app">
    <!-- 过滤器可以串联 -->
    {{message|subMessage|toUpper}}
    <br>
    <!-- 过滤器是 JavaScript 函数，因此可以接受参数 -->
    <!-- 这里job是第一个参数，apple是第二个参数，表达式2+3运行后的结果是第三个参数 -->
    {{job|doWhat('apple',2+3)}}
    
</div>
    
<script>
 new Vue({
     el:"#app",
    data:{
        message:"hello my friend",
        job:"sale"
    },
    filters:{
        subMessage:function(value){
            return value.substring(0,7)
        },
        toUpper:function(value){
            return value.toLocaleUpperCase()
        },
        doWhat:function(v1,v2,v3){
            return v1+" "+v2+" "+v3
        }
    }
 })
</script>

转载于:https://www.cnblogs.com/shamo89/p/10119513.html

dichengyan0013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（五）：Vue模板语法

1.{{...}}（双大括号）文本插值<div id="app"> <p>{{ message }}</p></div>2.v-html指令用于输出 html 代码<div id="app"> <div v-html="message"></div&gt...
复制链接

扫一扫