vue.js模板语法

最新推荐文章于 2021-07-06 17:12:42 发布

随枫潜入夜

最新推荐文章于 2021-07-06 17:12:42 发布

阅读量156

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42243957/article/details/107883273

版权

vue 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.class1{
  background: #444;
  color: #ddd;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>  
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	{{5+5}}<br>
	{{ ok ? 'YES' : 'NO' }}<br>
	{{ message.split('').reverse().join('') }}
	<div v-bind:id="'list-' + id">gg</div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	ok: true,
    message: 'baidu',
	id : 1
  }
})
</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

当seen为false:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <pre><a v-bind:href="url">百度</a></pre>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>
</body>
</html>

在这里插入图片描述

点击后：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'baidu!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

在这里插入图片描述

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

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

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'baidu'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

在这里插入图片描述

其他：

1、给元素绑定href时可以也绑一个target，新窗口打开页面。
在这里插入图片描述

2、

这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1

3、过滤器可以接收多个表达式，message 和 mesage2 将作为过滤器的前两个参数：
在这里插入图片描述

4、

5、

6、v-model 练习（任意输入内容的首个最长回文段）

<div id="app">
    <input v-model="s">
    <div v-html="'首个最长回文：'+changes()">
    </div>
</div>

<script>
new Vue({
  el: '#app',
    data:{
      s:"dsad",
    },
    methods:{
        changes:function(){
        var s = this.s;
        var max = "";
                for (var i = 0; i < s.length; i++) {
                    var mas = s.charAt(i);//定义回文中心
                    masH = i - 1;//回文左边界
                    masF = i + 1;//回文右边界
                    while (masH >= -1 & masF < s.length) {
                    //奇数回文中心变化
                    if (s.charAt(masH) == s.charAt(masF)) {
                            mas = s.charAt(masH) + mas + s.charAt(masF);
                            masH--;
                            masF++;
                    } else {
                //偶数回文中心变化
                            if (s.charAt(masF) == s.charAt(masF - 1)) {
                            mas += s.charAt(masF);
                            masF++;
                            } else {
                            break;
                            }
                    }
                    }
            //只采用第一个最长回文
                    if (mas.length > max.length) {
                        max = mas;
                    }
                }
        return max;
            }
    }
    
})
</script>

7、针对表达式的应用和多个属性参数的使用：

<div id="app">
  {{ message | capitalize('!',label,1<2?true:false) | capitalize2}}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob',
     label:'———'
  },
  filters: {
    capitalize: function (value,value2,value3,value4) {
      if (!value) return ''
      value = value.toString()
        console.log('capitalize1调用');
      return value.charAt(0).toUpperCase() + value.slice(1)+value2+value3+value4;
    },
       capitalize2: function (value) {
      if (!value) return ''
      value = value.toString()
           console.log('capitalize2调用');
      return value.charAt(0)+value.charAt(1).toUpperCase() + value.slice(2);
    }
  }
})
</script>

在这里插入图片描述

8、在这里插入图片描述

<div id="app">
  <input type = "text" v-model = 'message'>
  <p>请输入原始字符串: {{ message }}</p>
  <button @click = "stringReverse">点我反转字符串</button>
  <p>计算后反转字符串: {{ newMessage }}</p>
  <button @click = "clear">点我清空</button>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: '',
    newMessage: ''
  },
  methods: {
    // 计算属性的 getter
    stringReverse:function(){
      // `this` 指向 vm 实例
      this.newMessage = this.message.split('').reverse().join('');
    },
    clear:function(){
      this.message = '';
      this.newMessage = '';
    }
  }
})
</script>