{% extends base %} {% block head %} {% include common/layout/wide_left.html %} {% include common/script/load_vue.html %} {% end %} {% block body %}
{% set title = "Vue Test" %} {% include common/base_title.html %}
{% init bind_html = """ Baidu Tag {{tag.name}} """ %}
目录

官方文档

vue2官方文档 {% init example_list = [ Storage(name = "声明式渲染", type = "h2"), Storage(name = "在文本中使用变量", code="""

{{message}}

"""), Storage(name = "禁止渲染文本中的变量", code="""

{{message}}

"""), Storage(name = "在属性中使用变量", code="""
鼠标悬停几秒钟查看此处动态绑定的提示信息!
"""), Storage(name = "条件与循环", type="h2"), Storage(name = "v-if/v-else-if/v-else", code="""

现在你看到我了

Math.random() > 0.4

看不到我

"""), Storage(name = "v-for", code="""

Example 1

Example 2

Example 3

Example 4

""") ] %} {% for example in example_list %} {% if example.type == "h2" %}

{{example.name}}

{% else %}

{{example.name}}

>代码

                {{ example.code }}
            

>效果

{% raw example.code %} {% end %} {% end %}

处理用户输入

v-on

v-model双向绑定

其他模板语法

v-once

This will never change: {{!message}}

v-html

v-bind动态绑定

参数绑定



    
效果
{% raw bind_html %}

JavaScript 表达式

{{! message + " >>>" }}

修饰符

过滤器

{{! message | toUpperCase }}

过滤器串联

{{! message | toUpperCase | length }}

过滤器加参数

{{! message | appendStr('arg2', 'arg3') }}

v-bind:href缩写:href

Baidu Baidu

v-on:click缩写@click

onclick获取本元素

vue+layer

{{!layerMsg}}
{{!layerCounter}}
{{!item.value}}
{% end %}